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

Question

[leni_m]

<div class="container-1">
    el1
    el2
</div>
<div class="container-2">
    el3
    el4
</div>

Как для мобильной версии el2 поставить после el4? На ум приходит ток js, единственный ли это путь?

Comments

[shmatuan]

или дублировать el2 после el4, но с display: none; и при определённом сделать display: block

[lb-web]

shmatuan, боже упаси, какой дублирование или js. flexbox))

[shmatuan]

lb-web, Эээм, как флексом такое сделать? О.О

<div class="container-1">
    el1  
</div>
<div class="container-2">
    el3
    el4
    el2
</div>

[lb-web]

shmatuan, блин. чет походу тупанул жестко.
сорян
нельзя, да
))
тольк js

[shmatuan]

lb-web, норм, бывает :D

[shmatuan]

lb-web, Чисто теоритически окзалось можно через флексы)) https://codepen.io/anon/pen/WYYbNV
Только зависит от задачи вообще)

Answer 1

[lb-web]

flexbox
display:flex
для мобил потом order

Comments

[leni_m]

это для контейнер один или два?

[lb-web]

Почитай про флексбокс. Очень занятно.
НА родительский контейнер для этих двух вешаете display:flex, затем для моб вариантов каждому из контейнеров присваиваете свойство order

[Andrew]

leni_m,
Для контейнера этих двух(.main-container)

.main-container{
display:flex;
}
.container-1{
display:flex;
order:1;
}
.container-2{
display:flex;
order:2;
}
@media screen and (max-width: 768px) {
    .container-1 {order:2}
 .container-2 {order:1}
   }

[lb-web]

Andrew, ну зачем вы так..человек бы про флексы прочитал, потом что сейчас на пк у него вероятно получится не совсем то, что он привык видеть.

[Beliyadm]

Не получится, если флексом будет родительский контейнер над container-1\2 - то ордером только их и переставишь, переместить из блока в блок флексом не выйдет
я за JS