Html 根据设备宽度使用 CSS 更改 div 顺序
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32829567/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change div order with CSS depending on device-width
提问by 3ocene
I am working on a responsive site and came across an interesting problem. I have some divs side by side. There could be anywhere from 2 to 6 or so of them. When the screen isn't wide enough to show all the content properly, the divs stack vertically. Simple enough to do with CSS.
我正在一个响应式网站上工作，遇到了一个有趣的问题。我有一些 div 并排。可能有 2 到 6 个左右。当屏幕宽度不足以正确显示所有内容时，div 会垂直堆叠。使用 CSS 就足够简单了。
The problem is, I need them to be in a different order depending on the layout. This is easy to do with 2 or 3 divs (Changing divs order based on width), but significantly more challenging when you add a fourth.
问题是，我需要它们根据布局采用不同的顺序。使用 2 或 3 个 div（根据宽度更改 div 顺序）很容易做到这一点，但是当您添加第四个div 时，难度会更大。
I could use position: absolute;and manually set the position, however this causes the parent to shrink and not contain them properly.
我可以使用position: absolute;并手动设置位置，但是这会导致父级缩小并且不能正确包含它们。
To make this even more complicated, I can't use JavaScript.
为了使这更复杂，我不能使用 JavaScript。
Working with two columns:
使用两列：
(untested)
（未经测试）
HTML:
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:
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, with 4 columns:
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>
回答by TylerH
This is doable in CSS thanks to the wonderful flexboxspec. Using the orderand flex-flowproperties, we can achieve what you want. Unprefixed, IE11 and all evergreen browsers will support this. IE10 prefixes -ms-orderand doesn't support flex-flow.
由于出色的flexbox规范，这在 CSS 中是可行的。使用order和flex-flow属性，我们可以实现您想要的。无前缀、IE11 和所有常绿浏览器都将支持这一点。IE10 前缀-ms-order，不支持flex-flow.
The solution takes into consideration all the constraints you listed:
该解决方案考虑了您列出的所有约束：
- Have a list of elements in a given order displayed as a row.
- When the window is too small, change them to display in a column.
- Change the order of the elements when they are displayed in a column.
- 将给定顺序的元素列表显示为一行。
- 当窗口太小时，将它们更改为在列中显示。
- 更改元素在列中显示时的顺序。
Because of the limitations of Stack Snippets, you'll need to view the demo in Full page mode, and resize your browser to see the effect.
由于 Stack Snippets 的限制，您需要以整页模式查看演示，并调整浏览器大小以查看效果。
.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>Alternatively, here is a JSFiddledemo.
或者，这里有一个JSFiddle演示。
You can also simply use flex-flow: column-reversewithout the orderproperty assigned to each div, if you are so inclined against verbose CSS. The same demo restrictions apply; view this demo in full screen and resize the browser window accordingly.
如果您不喜欢冗长的 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 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>It's worth pointing out that flex-flowis a shorthand property encompassing both flex-directionand flex-wrapproperties.
值得指出的是，这flex-flow是一个包含flex-direction和flex-wrap属性的简写属性。
