Изменение порядка div с помощью CSS в зависимости от ширины устройства

Я работаю над отзывчивым сайтом и сталкивался с интересной проблемой. У меня есть несколько divs бок о бок. Там может быть от 2 до 6 или около того. Когда экран недостаточно широк, чтобы отображать все содержимое правильно, стек divs вертикально. Достаточно просто сделать с CSS.

Проблема в том, что мне нужно, чтобы они были в другом порядке в зависимости от макета. Это легко сделать с 2 или 3 divs (Изменение порядка divs на основе ширины), но значительно сложнее, если вы добавите четвертый.

Я мог бы использовать 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>

Ответ 1

Это можно сделать в CSS благодаря замечательной flexbox spec. Используя order и flex-flow свойства, мы можем достичь того, чего вы хотите. Unprefixed, 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 }
}

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