html 按设备使用css,根据设备宽度使用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 }

}

I'm first

I'm second

I'm third

I'm fourth

I'm fifth

另外，这是一个JSFiddle演示。

如果您倾向于冗长的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; }

}

I'm first

I'm second

I'm third

I'm fourth

I'm fifth

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