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

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

问题是，我需要根据布局以不同的顺序排列。使用2个或3个div（）很容易做到这一点，但添加第四个div时，难度要大得多

我可以使用

位置：绝对

并手动设置位置，但是这会导致父对象收缩，并且无法正确包含它们

更复杂的是，我不能使用JavaScript

使用两列： （未经测试）

HTML:

HTML，共4列：

手机上的第一个div，桌面上的第三个div
手机上的第二个div，桌面上的第二个div
手机上的第三个div，桌面上的第一个div
手机上的第四个div，桌面上的第四个div

这在CSS中是可行的，这要感谢出色的规范。使用和属性，我们可以实现您想要的。IE11和所有evergreen浏览器都将支持这一点。IE10前缀为

-ms-order

，不支持

弹性流

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

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

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

.container div{
宽度：100px；
高度：50px；
显示：内联块；
}
.1{背景：红色；}
.two{背景：橙色；}
.3{背景：黄色；}
.four{背景：绿色；}
.5{背景：蓝色；}
@媒体屏幕和屏幕（最大宽度：531px）{
.container{display:flex；flex-flow:column；}
.5{顺序：1；}
.four{顺序：2；}
.3{顺序：3；}
.2{顺序：4；}
.1{顺序：5}
}

我是第一个
我是第二名
我是第三名
我是第四名
我是第五名

我正要提出一些类似泰勒的建议。如果您可以使用Flexbox，它可能会让您以一种优雅的方式完成这项工作。如果您需要一个示例快速指南，这里有一个来自CSS技巧的链接：多一点上下文也会有所帮助。这可以通过一些巧妙的浮动来实现，或者需要一些更加狡猾的方法。

<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>

.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;
}

<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>