在移动设备上左栏 top/bottom，带有 bootstrap 3 和两个侧边栏

Question

我正在尝试使用 bootstrap 3 网格系统使左侧边栏的一部分显示在顶部，另一部分显示在移动设备的底部。右侧边栏给我带来了问题。

"Left col bottom" 被 "Right col" 向下推。当 "Right col" 更高时，使用 col-md-pull-9 时 "Left col bottom" 被推出页面。我知道使用超过 12 列会降低内容。有办法避免吗？

http://www.bootply.com/t79A9Q20SW

<div class="row">

    <aside class="col-md-3 col-sm-12 side" role="complementary">
      <div style="height:40px;background-color:red;"><p>(Red) Left col top (top mobile)</p></div>
    </aside>

    <section class="col-md-6 col-sm-12">
        <div style="height:180px;background-color:green;"><p>(Green) Main content</p></div>
    </section>


    <aside class="col-md-3 col-sm-12 side" role="complementary">
      <div style="height:140px;background-color:silver;">(Grey) Right col (bottom mobile)<br>This pushes the "Left col bottom" down/away</div>   
    </aside>


    <aside class="col-md-3 col-sm-12 side col-md-pull-9" role="complementary">
        <div style="height:100px;background-color:yellow;">(Yellow) Left col bottom (bottom mobile)(.col-md-pull-9 woks partially when Right col is not high)</div>
    </aside>

</div>
<div class="row" style="background-color:grey;"><p align="center">Bottom line</p></div>

（没有右侧边栏，事情就容易多了http://www.bootply.com/NlsKWaUFq4）

复制内容并使用 Bootstrap 可见性类，可能会解决问题。但是不是很优雅。

Answer 1

只需尝试隔离部分，例如（（第一个左边+内容+第二个左边）+右边）

<div class="row">

    <div class="col-md-9">
        <div class="row">        
            <aside class="col-md-4 col-sm-12 side" role="complementary">
              <div style="height:40px;background-color:red;"><p>(Red) First left aside block</p></div>
            </aside>
            <section class="col-md-8 col-sm-12 main-content">
                <div style="height:180px;background-color:green;"><p>(Green) Main content</p></div>
            </section>
            <aside class="col-md-4 col-sm-12 side side-2" role="complementary">
                <div style="height:100px;background-color:yellow;">(Yellow) Second left aside block</div>
            </aside>
        </div>
    </div>

    <aside class="col-md-3 col-sm-12 side" role="complementary">
      <div style="height:140px;background-color:silver;">(Grey) Right aside</div>   
    </aside>

</div>
<div class="row" style="background-color:grey;"><p align="center">Bottom line</p></div>

和css

@media (min-width:992px){
    .main-content{float:right!important;}
    .side-2{float:left!important;}
}

更新：http://www.bootply.com/Ho1wjgKCGx

在移动设备上左栏 top/bottom，带有 bootstrap 3 和两个侧边栏

Left col top/bottom on mobile with bootstrap 3 and two sidebars

css

grid-layout

twitter-bootstrap-3