Bootstrap拉柱包装

Question

我有一个布局挑战，似乎无法用引导网格系统解决。但也许我错了？ 在两个响应步骤md和lg中，所需的布局是：

MD：

LG：

我已经尝试并考虑了很多，但我没有比直觉的第一种方式更接近它：

<div id="main" class="container">
    <div class="row">
        <div class="col-lg-12 col-md-9 blue"></div>
        <div class="col-md-9 col-md-push-3 col-lg-push-0 green"></div>
        <div class="col-md-3 col-md-pull-9 col-lg-pull-0 red"></div>
    </div>
</div>

当然对于lg当然没问题，但是在md：

中留下了这个

你会认为红色块会根据需要在蓝色旁边包裹。

我现在能想到的唯一方法就是停止推动和拉动cols，而是让md中的红色块为负边缘。但是感觉很脏，或者在这里不使用bootstraps网格并通过其他方式解决它，这将是一个无赖。

此外，它必须与IE8兼容......;）

Answer 1

我想我解决了它：

<div class="blue col-lg-12 col-md-9" style="padding:0;margin:0;background:blue;height:500px;">
</div>
<div class="green col-md-9 col-lg-9"     style="padding:0;margin:0;background:green;height:500px;"></div>
    <div class="red col-md-pull-9 col-lg-pull-3" style="padding:0;margin:0;background:red;height:1000px;"></div>

https://jsfiddle.net/beardedmike/b69hnh9r/2/

Answer 2

你只需要在蓝色和绿色之间移动红色div（IE交换红色和绿色div），然后修改你的推拉，以便红色在大屏幕上正确地坐在蓝色旁边并且它与中等屏幕上的绿色div。

这样的事情应该有效：

<div id="main" class="container">
    <div class="row">
        <div class="col-lg-12 col-md-9 blue"></div>
        <div class="col-lg-3 col-lg-push-9 col-md-3 red"></div>
        <div class="col-lg-9 col-md-9 green col-lg-pull-3"></div>
    </div>
</div>

另外，所以红色占据了它的整个高度，只为它增加了一个漂浮物：

@media all and (min-width: 992px) and (max-width:1200px) {
    .red{
        float:right;
    }
}

希望这有帮助！

*编辑：这是JSFiddle以供参考。