Обратное направление конкретной строки в сетке

Question

Я пытаюсь изменить направление определенной строки в сетке, когда на мобильном телефоне.

<div class="wrapper">
    <div class="project"></div>
    <div class="project"></div>
    <div class="project"></div>
    <div class="project"></div>
    <div class="project"></div>
    <div class="project"></div>
    <div class="project"></div>
    <div class="project"></div>
</div>

Цель состоит в том, чтобы второй div отображался раньше первого, когда браузер встречает определенный медиа-запрос.

Answer 1

Вы можете использовать order CSS-свойство .

Если вы установите display: flex; на .wrapper и установите order: -1 на 2-й div внутри .wrapper, он будет отображаться первым.

CSS:

.wrapper {
  display: flex;
}

.wrapper div:nth-of-type(2) {
  order: -1;
}

Теперь поместите это в Media Query , и вы можете ограничить это поведение для мобильных устройств.

Вот пример CodePen .