Как изменить порядок элементов внутри флексбокса в соответствии с размером экрана?

Question

Я работаю с дизайнером, который дал мне следующий стиль. Я не знаю, как я смогу воспроизвести это простым CSS без необходимости вручную переставлять объекты.

Вот текстовая визуализация того, чего я хочу достичь.

### пробел ##### По умолчанию, элемент 1, элемент 3, элемент 5

### пробел ##### элемент 2, элемент 4 , элемент 6

Однако при уменьшении размера экрана:

Параметр по умолчанию

элемент 1

элемент 2

элемент 3

элемент 4

элемент 5

элемент 6

В основном, когда экран достаточно большой, все индексы шансов в верхней строке и все четные индексы в нижней . Однако, когда экран недостаточно велик, он хочет, чтобы элемент был в столбце с элементами в правильном порядке. Обратите внимание, что в верхнем ряду есть параметр по умолчанию, который всегда находится сверху. (либо первым в первой строке, либо вверху вертикального столбца)

Как мне этого добиться?

Спасибо!

Answer 1

Я бы использовал свойство css order.

Вы размещаете элементы в правильном порядке для мобильного представления. Когда окно становится достаточно большим, вы меняете порядок отдельных элементов с помощью медиа-запроса.

А с помощью псевдокласса :nth-child() вы можете перемещать четные или нечетные поля в верхней строке

@media (min-width: 500px) {
  .container {
    display: flex;
    flex-wrap: wrap;
  }
}


.container > div {
  background: green;
  margin: .5rem;
  height: 100px;
  width: 100px;
}

@media (min-width: 500px) {
  .container > div {
    width: calc(50% - 1rem);
  }
}

@media (min-width: 500px) {
  .container > div:nth-child(even) {
    order: -1;
  }
}

<div class="container">
  <div class="box-1">1</div>
  <div class="box-2">2</div>
  <div class="box-3">3</div>
  <div class="box-4">4</div>
</div>

Answer 2

Вы можете использовать flex-flow или, скорее, flex-direction, чтобы установить элементы в столбце или строке. Если вы хотите изменить положение отдельного элемента, вы можете использовать для него свойство order. Подробнее о заказе гибких элементов здесь