Левая колонка сверху/снизу на мобильном телефоне с бутстрапом 3 и двумя боковыми панелями

Question

Я пытаюсь использовать систему сетки бутстрапа 3, чтобы сделать одну часть левой боковой панели дисплея сверху, а другую внизу на мобильном телефоне. Правильная боковая панель дает мне проблемы.

«Левое нижнее дно» сдвинуто вниз «Правым колоном». Когда «Right col» выше, «Left col bottom» выталкивается из страницы при использовании col-md-pull-9. Я понимаю, что использование более 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;} 
} 

Update: http://www.bootply.com/Ho1wjgKCGx