相关疑难解决方法(0)

我正在开发一个响应式网站,并遇到了一个有趣的问题.我有一些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 …