Показать список ul выше div на мобильном телефоне

Question

Я пытаюсь отобразить список ul выше div, но только на mobile . Каков наилучший способ сделать это? Вот простой код:

<div>
    <div>
      <p>
        This is a content!       
      </p>
    </div>
  <ul>
    <li>Test 1</li>
    <li>Test 2</li>
    <li>Test 3</li>
    <li>Test 4</li>
  </ul>

Идеальный сценарий для мобильных устройств будет выглядеть так:

<div>

  <ul>
    <li>Test 1</li>
    <li>Test 2</li>
    <li>Test 3</li>
    <li>Test 4</li>
  </ul>

    <div>
      <p>
        This is a content!       
      </p>
    </div>


</div>

Answer 1

Вы можете использовать flexbox и использовать свойство порядка внутри медиа-запроса для переворачивания гибких элементов.

.wrapper {
  display: flex;
  flex-direction: column;
}

@media only screen and (max-width: 600px) {
  .wrapper>div {
    order: 2;
  }
  .wrapper>ul {
    order: 1;
  }
}

<div class="wrapper">
  <div>
    <p>
      This is a content!
    </p>
  </div>
  <ul>
    <li>Test 1</li>
    <li>Test 2</li>
    <li>Test 3</li>
    <li>Test 4</li>
  </ul>
</div>