Есть такая разметка (код):
$(window).on('resize', function(){
var
row = $('.row'),
box = row.find('.box'),
active1 = $('.s-2'),
active2 = $('.s-5'),
left = row.find('.left'),
right = row.find('.right');
//console.log(active);
if ($(window).width() < 768) {
if(active1.closest(right).length){
left.insertBefore(active1);
}
if(active2.closest(right).length){
left.insertBefore(active2);
}
}
else {
}
});
.row {
overflow: hidden;
}
* {
box-sizing: border-box;
}
aside {
background: lightblue;
width: 250px;
margin: 0 auto 20px;
overflow: hidden;
}
main {
height: 500px;
background: #ccc;
}
.box {
height: 100px;
background: #ddd;
margin: 10px;
}
@media screen and (min-width: 768px) {
aside {
width: 25%;
}
.left {
float: left;
}
.right {
float: right;
}
main {
width: 50%;
float: left;
}
}
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<div class="row">
<aside class="left">
<div class="box s-1">1</div>
<div class="box s-2">2</div>
<div class="box s-3">3</div>
</aside>
<main>
</main>
<aside class="right">
<div class="box s-4">4</div>
<div class="box s-5">5</div>
<div class="box s-6">6</div>
</aside>
</div>
На каждой странице порядок виджетов (.box
) может быть разный (т.е. 123 | 456 или 281 | 354 и т.д), но на девайсах меньше 768px
в левом сайдбаре должны оставаться только определенные блоки (например, 2-й и 5-ый), а все остальные должны перемещаться в правый сайдбар.
Т.е. должна получиться такая разметка на планшетах и ниже:
<div class="row">
<aside class="left">
<div class="box s-2">2</div>
<div class="box s-5">5</div>
</aside>
<main>
</main>
<aside class="right">
<div class="box s-1">1</div>
<div class="box s-3">3</div>
<div class="box s-4">4</div>
<div class="box s-6">6</div>
</aside>
</div>
Пока не могу даже придумать идею. Пытаюсь проверить, есть ли нужный блок в .right
. Если есть, то добавить его в .left
, но, видимо, уже неправильно.
Вопрос: как можно переместить необходимые блоки (например, второй и пятый) в один левый сайдбар, а все оставшиеся блоки переместить в правый сайдбар?