得益于出色的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属性的简写属性。
