Как поменять местами элементы в мобильной версии?

Question

[Илья]

Вот такие блоки, расположенные в двух рядок .col-7>div и .col-5>div:

В мобильной версии они должны располагаться в один ряд, в правильном порядке:

Как это можно реализовать? Если каждому блоку задавать .col, то можно будет их распределить с помощью .order, но блоки будут начинаться в одном месте:

А мне нужно что бы они располагались друг за другом.
Как это можно реализовать?

Answer 1

[Adilet Zhuman]

Для этого вам нужно по другому написать html
На пример

<div class="cantainer">
<div class="row">
<div class="col-7">
1 блок
</div>
<div class="col-5">
2 блок
</div>
<div class="col-7">
3 блок
</div>
<div class="col-5">
4 блок
</div>
</div>

и будет вам счастья)

Comments

[Илья]

В вопросе есть этот вариант, в этом варианте блоки одинаковой высоты, а должны быть разной:
https://jsfiddle.net/aq9Laaew/199813/

[Adilet Zhuman]

тогда использовать masonry

[Adilet Zhuman]

Илья, Или можно на флексах, но нужно будет задавать высоту

[Илья]

Adilet Zhuman, вы про https://masonry.desandro.com/ ? И там есть адаптивность, что бы менять порядок?

[Adilet Zhuman]

Илья, да с помощью него можете выполнить задачу