html - 网格中特定行的反向

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 .

如果你在 .wrapper 上设置了 display: flex; 并且在第二个 div 上设置了 order: -1 > 在 .wrapper 中，它会首先显示。

CSS:

.wrapper {
  display: flex;
}

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

现在，将其放入 Media Query 中，并且您可以将该行为限制在移动设备上。

这是一个 CodePen example .