Twitter bootstrap 自举'；s自适应网格。出口柱

在lg上，它应该是这样的：

在md上，它应该是这样的：

有什么办法吗？隐藏和可见不是个好主意，因为

div3

是一个复杂的控件

---

对不起，我的英语不太好，但我不认为只有引导类才能做到这一点。不过，只要使用一点jQuery，您就可以实现它

注意-如果您没有使用Bootstrap的原始

lg

，则需要修改

1200

，以适合您的版本

HTML

jQuery

$(window).on('load resize', function() {
    var windowSize = $(this).width();
    if(windowSize < 1200) {
        $('.div3').appendTo('.div3-row');
    } else {
        $('.div3').appendTo('.col1');
    }
});

$（窗口）.on（'load resize'，function（））{
var windowSize=$（this）.width（）；
如果（窗口大小<1200）{
$（'.div3'）.appendTo（'.div3行'）；
}否则{
$（'.div3'）.appendTo（'.col1'）；
}
});

要完成lg布局，您可以在引导中使用本机（

*-push

和

*-pull

类）

这是一个想法：您将最高的列放在第一位（DIV2），其他列放在它旁边，然后“反转”列顺序

要使DIV3消失，请理解DIV1和DIV2在两种分辨率中是相同的。因此，您只需在md中为DIV3指定不同的列大小，在本例中为全宽度的12。因为它超过了可用空间，所以它会下降

<div class="container">
    <div class="row">

        <div class="col-md-6 col-md-push-6" style="height:600px">
            DIV2
        </div>

        <div class="col-md-6 col-md-pull-6" style="height:300px">
            DIV1
        </div>

        <div class="col-lg-6 col-lg-pull-6 col-md-12" style="height:300px">
            DIV3
        </div>

    </div>
</div>

第二组
第一组
第三组

---

请参见此处的演示：

做得很好！我早些时候在补课，运气不太好。因为没有其他人给出答案，所以我提供了一个jQuery解决方案。这绝对是正确的方法。即使DIV1和DIV2的宽度不同，它也可以很好地工作，但是如果DIV2总是高于DIV1。但这不一定。但是非常感谢，这是一个进步。但是你没有在最初的问题中包括这个细节。你应该这样做，因为每个人都能更好地帮助你。那么，如果我理解正确的话，即使在DIV1高于DIV2的情况下，您也希望保持相同的行为？对不起。是的，你说得对。lg中的DIV3应始终位于DIV1之下

<div class="container">
    <div class="row">

        <div class="col-md-6 col-md-push-6" style="height:600px">
            DIV2
        </div>

        <div class="col-md-6 col-md-pull-6" style="height:300px">
            DIV1
        </div>

        <div class="col-lg-6 col-lg-pull-6 col-md-12" style="height:300px">
            DIV3
        </div>

    </div>
</div>