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

Question

我正在开发一个响应式网站,并遇到了一个有趣的问题.我有一些divs并排.它们可能有2到6个左右.当屏幕宽度不足以正确显示所有内容时,div会垂直堆叠.简单到使用CSS.

问题是,我需要它们按照不同的顺序排列.这很容易使用2或3个div(根据宽度更改div顺序),但在添加第四个时更具挑战性.

我可以使用position: absolute;并手动设置位置,但这会导致父级缩小而不能正确包含它们.

为了使这更复杂,我不能使用JavaScript.

使用两列:

(另)

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:

.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,有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>

Answer 1

由于精彩的flexbox规范,这在CSS中是可行的.使用order和flex-flow属性,我们可以实现您想要的.未加前缀的IE11和所有常青浏览器都支持此功能.IE10前缀-ms-order并不支持flex-flow.

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

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

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

或者,这是一个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; }
}

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

值得指出的是,这flex-flow是一个包含两者flex-direction和flex-wrap属性的速记属性.