网格中特定行的反向

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上设置.wrapper { display: flex; } .wrapper div:nth-of-type(2) { order: -1; } ，它将首先显示。

CSS：

<input type='checkbox' name='response2' value='response2'>Messi</label>

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

这里是CodePen example。