ブートストラップ3と2つのサイドバー付きのモバイル上/下の左揃え

Question

ブートストラップ3グリッドシステムを使用して、左側サイドバーの表示の一部を上に、別の部分をモバイルの下に表示しようとしています。右側のサイドバーが私に問題を与えている。

「左揃え」は「右揃え」でプッシュダウンされます。 "Right col"が高い場合、col-md-pull-9を使用すると、 "Left col bottom"がページから押し出されます。私は12個以上のcolsを使うことは物事を押しつぶすことを理解しています。それを避ける方法はありますか？

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はるかに簡単です）

ものを複製し、ブートストラップの可視性クラスを使用して、おそらくそれを解決します。しかし、あまりエレガントではありません。

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