Bootstrap的自适应网格。退出col

Question

在lg上它应该是：

在md上应该是这样的：

有办法吗？隐藏和可见并不是一个好主意，因为div3是复杂的控制。

抱歉我的英文

Answer 1

要完成lg布局，您可以在Bootstrap（*-push和*-pull类）中使用本机column order manipulation。

这是一个想法：你把最高的列放在第一位（DIV2），将其他列放在它旁边，然后＆＃34;反转＆＃34;列顺序。

要让DIV3消失，请理解DIV1和DIV2在两种分辨率下都相同。所以你只需要为md中的DIV3指定不同的col大小，在这种情况下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>

在此处查看演示：http://www.bootply.com/G0I9Lpg5AQ

Answer 2

我不是肯定的，但我不认为你可以用 ONLY Bootstrap类来做到这一点。但是，有了一些jQuery，你可以把它拉下来。

Here is a Demo

注意 - 如果您不使用Bootstrap的原始lg，则需要修改1200以适合您的版本。

HTML

<div class="container">
    <div class="row">
        <div class="col-xs-6 col1">
            <div class="col-xs-12 div1"></div>
            <div class="col-xs-12 div3"></div>
        </div>
        <div class="col-xs-6 col2">
            <div class="col-xs-12 div2"></div>
        </div>
    </div>
    <div class="row div3-row hidden-lg"></div>
</div>

的jQuery

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