<div id="wrap">
<div class="center">
<div class="section">
<div class="blocks" id="blocks-1">
<div class="block block--moving">01</div>
<div class="block">02</div>
<div class="block block--moving">03</div>
<div class="block">04</div>
<div class="block">05</div>
</div>
<div class="blocks" id="blocks-2">
<div class="block">06</div>
<div class="block">07</div>
<div class="block">08</div>
<div class="block">09</div>
<div class="block">10</div>
</div>
</div>
</div>
</div>
// autoprefixer: true
html,
body {
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 16px;
line-height: 1.4;
color: #555;
background: #fff;
}
* {
box-sizing: border-box;
}
#wrap {
position: relative;
}
.section {
padding: 40px;
}
.center {
width: 100%;
max-width: 1200px;
margin: auto;
}
.blocks {
display: flex;
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}
.block {
flex: 1 1 auto;
background: #eee;
margin: 5px;
text-align: center;
line-height: 40px;
&--moving {
background: #ffc4c4;
}
}
View Compiled
// определяем контейнеры
var $blocksContainer1 = $('#blocks-1'),
$blocksContainer2 = $('#blocks-2');
function setBlocks() {
// работаем с блоками только в первом контейнере
$blocksContainer1.find('.block').each(function () {
var $block = $(this),
blockIndex = $block.index();
// раздаем дату про местонахождение блока и сразу пишем в цсс, дата нужна будет только если предполагается в дальнейшем работать еще и с позицией блока во втором котейнере, так можно сразу писать в цсс и все
$block
.data('order', blockIndex)
.css({
order: blockIndex
});
});
}
function checkBlocks() {
// работаем только с подвижными блоками (нужно раздать таким классы, например 'block--moving') по всем контейнерам
$('.block--moving').each(function () {
var $movingBlock = $(this);
if ($(window).width() < 600) {
$movingBlock.appendTo($blocksContainer2);
} else {
$movingBlock.appendTo($blocksContainer1);
}
});
}
$(window).on('load', function () {
setBlocks();
});
$(window).on('resize', function () {
checkBlocks();
});
This Pen doesn't use any external CSS resources.