Bootstrap響應式設計 - 移動面板

Question

無論如何要將面板「移動」到另一個之前？

比如我有3個小組：

<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> 

我想要做的就是當手機達到

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

我想讓我的2 COL-XS-6的面板[左然後中間將在他們之下，因爲它是一個col-xs-12

我試圖添加一個

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

裏面的手機媒體，以便我可以嘗試強制他們漂浮在一起，但它沒有奏效。

這甚至可能嗎？

Answer 1

1.You可以使用XS設備顯示器撓性性質。
codepen

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

2.也可以創建之後的div另一箇中期股利和只顯示其在XS設備，同時保持第一中間DIV隱藏僅XS設備。深入瞭解隱藏*和可見引導程序類here。
codepen