根据设备宽度更改CSS的div顺序

根据设备宽度更改CSS的div顺序

得益于出色的flexbox规范，这在CSS中是可行的。使用

order

和

flex-flow

属性，我们可以实现您想要的。IE11和所有常绿浏览器无前缀，将支持此功能。IE10前缀

-ms-order

，不支持

flex-flow

。

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

• 将指定顺序的元素列表显示为一行。
• 如果窗口太小，请更改它们以显示在列中。
• 当元素在列中显示时，更改它们的顺序。

由于堆栈代码段的限制，您需要以整页模式查看演示，并调整浏览器的大小以查看效果。

.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 >    <div >I'm first</div>    <div >I'm second</div>    <div >I'm third</div>    <div >I'm fourth</div>    <div >I'm fifth</div></div>

---

如果您倾向于冗长的CSS，也可以在

flex-flow: column-reverse

不将

order

属性分配给每个div的情况下直接使用。相同的演示限制适用；全屏查看此演示，并相应地调整浏览器窗口的大小。

.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 >    <div >I'm first</div>    <div >I'm second</div>    <div >I'm third</div>    <div >I'm fourth</div>    <div >I'm fifth</div></div>

值得指出的是，这

flex-flow

是同时包含

flex-direction

和

flex-wrap

属性的简写属性。