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-хз-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 после правой DIV и показать его только на Xs устройствах, сохраняя при этом первую середину Див спрятана на только Xs устройствах. узнайте больше о скрытых * и видимых * * методах начальной загрузки here.
codepen