Bootstrap Responsive Design - move panel

Question

Gibt es trotzdem ein Panel vor einem anderen zu "bewegen"?

Zum Beispiel habe ich drei Platten:

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

Was ich tun möchte, wenn das Telefon

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

ich meine 2 col-xs-6-Panels [links will erreicht machen und rechts] sein, nebeneinander und dann wird Mitte unter ihnen sein, da es ein col-xs-12

ist ich habe versucht, das Hinzufügen einer

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

in den Telefonmedien, so dass ich versuchen konnte, sie zu zwingen, nebeneinander zu schweben, aber es hat nicht funktioniert.

Ist das überhaupt möglich?

Answer 1

1.You kann Anzeige flex Eigenschaft auf xs-Geräte verwenden. nur
codepen

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

2. Oder Sie können eine andere Mitte div nach rechts div und zeigen Sie es nur auf xs Geräte erstellen, während die erste Mitte auf xs Geräte versteckt Div, zu halten. Erfahren Sie mehr über die Klassen hidden- * und visible- * bootstrap here.
codepen