修订答案
在这个回答https://stackoverflow.com/a/32565224/3956566的帮助下，我整理了一些代码。
为了方便您的自定义，我使用了一个较小的宽度。同时，将任何css更改放在site.css文件中，而不是bootstrap，并在bootstrap之后调用site.css，以覆盖更改。
Css:
div {outline:solid 1px red; }
.left {
}
.right {
}
HTML：
<div style="display:none">
<div id="1" class="left" style="height:100px;background-color:yellow;">DIV 1</div>
<div id="2" class="right" style="height:20px;">DIV 2</div>
<div id="3" class="left" style="height:50px;background-color:yellow;">DIV 3</div>
<div id="4" class="right" style="height:170px;">DIV 4</div>
<div id="5" class="left" style="height:120px;background-color:yellow;">DIV 5</div>
<div id="6" class="right" style="height:30px;">DIV 6</div>
<div id="7" class="left" style="height:50px;background-color:yellow;">DIV 7</div>
<div id="8" class="right" style="height:90px;">DIV 8</div>
</div>
<div id="div1" style="width: 50%;float:left;background-color:grey"></div>
<div id="div2" style="width: 50%;float:right;background-color:blue"></div>
<div id="div3" style="width: 100%;float:left;background-color:white"></div>
jQuery:
if ($(window).width() > 400) {
$('#div1').append($('.left'));
$('#div2').append($('.right'));
}
if ($(window).width() < 400) {
$('#div3').append($('#1'));
$('#div3').append($('#2'));
$('#div3').append($('#3'));
$('#div3').append($('#4'));
$('#div3').append($('#5'));
$('#div3').append($('#6'));
$('#div3').append($('#7'));
$('#div3').append($('#8'));
}
$('#div1').append($('.left'));
$('#div2').append($('.right'));
$( window ).resize(function() {
if($(window).width()>400){
$('#div1').append($('.left'));
$('#div2').append($('.right'));
}
if($(window).width()<400)
{
$('#div3').append($('#1'));
$('#div3').append($('#2'));
$('#div3').append($('#3'));
$('#div3').append($('#4'));
$('#div3').append($('#5'));
$('#div3').append($('#6'));
$('#div3').append($('#7'));
$('#div3').append($('#8'));
}
});
查看示例:
https://jsfiddle.net/kermit77/vo439fte/4/
第一个答案
除了在计算每个div的高度并相应调整边距（仅适用于更大的布局）之外，还要采取进一步措施;
例如：
div 1 height = a, div 2 height = b
div diff = (a-b)
if diff >0
div 4 top margin = -diff
else
div 3 top-margin = -diff;
但您需要对奇数编号的div高度和偶数编号的div高度进行累加并作出相应调整。
我已经缩小了宽度以进行测试。您需要在每个第三个div上清除左侧以防止其放置在右侧。
<div class="row">
<div class="col-lg-6 col-sm-12" style="height:100px;">DIV 1</div>
<div class="col-lg-6 col-sm-12" style="height:80px;">DIV 2</div>
<div class="col-lg-6 col-sm-12" style="height:50px;clear:left;">DIV 3</div>
<div class="col-lg-6 col-sm-12" style="height:40px;">DIV 4</div>
</div>
每隔三个 div 元素清除左浮动。
CSS：
div {outline:solid 1px red; }
.row {
margin-right: 2px;
margin-left: 2px;
}
@media (min-width: 500px) {
.container {
max-width: 1170px;
}
.col-lg-6 {
max-width:50%;
width: 50%;
float:left;
clear:right;
}
}
@media (min-width: 150px) {
.container {
max-width: 500px;
}
.col-sm-12 {
width: 100%;
}
}
