反转网格中特定行的方向

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出现在第一个div之前。

Answer 1

你可以使用order CSS property。

如果你在display: flex;上设置.wrapper并在order: -1内的第二个div上设置.wrapper，它将首先显示。

CSS：

.wrapper {
  display: flex;
}

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

现在，将它放在Media Query中，你可以将该行为限制为移动。

这是一个CodePen example。