ブートストラップレスポンシブデザイン - 移動パネル

Question

パネルを別のパネルの前に「移動」する方法はありますか？例えば

私は3つのパネルがあります。携帯電話は、私は私の2 COL-XS-6パネル[左を作りたい

@media (max-width: 768px) { } 

に達したときに、私がやりたい何

<div id="left" class="col-xs-6 col-sm-3 col-md-3 col-lg-3"> 

     <a href="mail-compose.html" class="btn btn-danger btn-block btn-compose-email">Left</a> 
     <div class="panel panel-default"> 
      <div class="panel-body">Panel content 


      </div> 
     </div> 

    </div> 
<div id="mid" class="col-xs-12 col-sm-3 col-md-3 col-lg-3"> 

     <a href="mail-compose.html" class="btn btn-danger btn-block btn-compose-email">Mid</a> 
     <div class="panel panel-default"> 
      <div class="panel-body">Panel content 


      </div> 
     </div> 

    </div> 
<div id="right" class="col-xs-6 col-sm-3 col-md-3 col-lg-3"> 

     <a href="mail-compose.html" class="btn btn-danger btn-block btn-compose-email">Right</a> 
     <div class="panel panel-default"> 
      <div class="panel-body">Panel content 


      </div> 
     </div> 

    </div> 

ですそして右】互いに隣接されるように、それがCOL-XS-12

Iは

を加える試みであるので、次に、中間その下になり

#left {float:left;} 
#right {float:left;} 

私はそれらをお互いの隣に浮かべるように試みることができたが、それはうまくいかなかった。

これも可能ですか？

Answer 1

1.Youは、xsデバイス上の表示フレックスプロパティを使用することができます。

@media(max-width:768px){ 
    #right 
    { 
    float:none; 
    display:flex; 
    flex-direction:column; 
    } 
} 

2. codepen

それとも、右のdivの後に別の半ばのdivを作成し、最初の半ばはXSデバイスのみに隠されたDIV維持しながら、唯一XSデバイス上でそれを表示することができます。 hidden- *とvisible- *ブートストラップクラス hereについてもっと知っておいてください。
codepen