根据设备宽度使用 CSS 更改 div 顺序答案

【问题标题】：Change div order with CSS depending on device-width根据设备宽度使用 CSS 更改 div 顺序
【发布时间】：2015-12-26 02:00:00
【问题描述】：

我正在开发一个响应式网站，遇到了一个有趣的问题。我有一些并排的div。可能有 2 到 6 个左右。当屏幕不够宽而无法正确显示所有内容时，div 会垂直堆叠。使用 CSS 很简单。

问题是，我需要它们根据布局以不同的顺序排列。使用 2 或 3 个 div (Changing divs order based on width) 很容易做到这一点，但添加第四个 div 则更具挑战性。

我可以使用position: absolute; 并手动设置位置，但这会导致父级缩小并且无法正确包含它们。

为了更复杂，我不能使用 JavaScript。

使用两列：

（未经测试）

HTML：

<div id="container">
    <div class="column-half column-half-2">
        First div on mobile, right div on desktop
    </div>
    <div class="column-half column-half-1">
        Second div on mobile, left div on desktop
    </div>
</div>

CSS：

.container {
    width: 80%;
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 20px;
    position: relative;
}
.column-half {
    display: table-cell;
    padding: 25px;
    vertical-align: top;
    width: 40%;
}
.column-half-1 {
    float: left;
}
.column-half-2 {
    float: right;
}

HTML，有 4 列：

<div id="container">
    <div class="column-quarter column-quarter-3">
        First div on mobile, third div on desktop
    </div>
    <div class="column-quarter column-quarter-2">
        Second div on mobile, second div on desktop
    </div>
    <div class="column-quarter column-quarter-1">
        Third div on mobile, first div on desktop
    </div>
    <div class="column-quarter column-quarter-4">
        Fourth div on mobile, fourth div on desktop
    </div>
</div>

【问题讨论】：

我正要提出与 TylerH 所做的类似的建议。如果您可以使用 Flexbox，它可能会让您以一种优雅的方式做到这一点。如果您需要包含示例的快速指南，这里是 CSS Tricks 的链接：css-tricks.com/snippets/css/a-guide-to-flexbox
多一点上下文也会有所帮助。这可以通过一些巧妙的浮动来完成，或者需要一些更狡猾的东西。

标签： html css flexbox

【解决方案1】：

感谢出色的 flexbox 规范，这在 CSS 中是可行的。使用order 和flex-flow 属性，我们可以实现您想要的。无前缀、IE11 和所有常青浏览器都将支持这一点。 IE10前缀-ms-order，不支持flex-flow。

该解决方案考虑了您列出的所有约束：

将元素列表按给定顺序显示为一行。
当窗口太小时，将它们更改为显示在一个列中。
更改元素在列中显示时的顺序。

由于 Stack Snippets 的限制，您需要在 Full page 模式下查看演示，并调整浏览器大小才能看到效果。

.container div {
    width: 100px;
    height: 50px;
    display: inline-block;
}

.one { background: red; }
.two { background: orange; }
.three { background: yellow; }
.four { background: green; }
.five { background: blue; }

@media screen and (max-width: 531px) {
    .container { display: flex; flex-flow: column; }
    .five { order: 1; }
    .four { order: 2;  }
    .three { order: 3; }
    .two { order: 4; }
    .one { order: 5 }
}

<div class="container">
    <div class="one">I'm first</div>
    <div class="two">I'm second</div>
    <div class="three">I'm third</div>
    <div class="four">I'm fourth</div>
    <div class="five">I'm fifth</div>
</div>

或者，这里有一个JSFiddle 演示。

如果您不喜欢冗长的 CSS，您也可以简单地使用 flex-flow: column-reverse 而不为每个 div 分配 order 属性。相同的演示限制适用；全屏查看此演示并相应地调整浏览器窗口的大小。

.container div {
    width: 100px;
    height: 50px;
    display: inline-block;
}

.one { background: red; }
.two { background: orange; }
.three { background: yellow; }
.four { background: green; }
.five { background: blue; }

@media screen and (max-width: 531px) {
    .container { display: flex; flex-flow: column-reverse; }
}

<div class="container">
    <div class="one">I'm first</div>
    <div class="two">I'm second</div>
    <div class="three">I'm third</div>
    <div class="four">I'm fourth</div>
    <div class="five">I'm fifth</div>
</div>

值得指出的是，flex-flow 是包含 flex-direction 和 flex-wrap 属性的简写属性。

【讨论】：