Bootstrap Grid Umordnung auf kleinere Auflösung

Question

Ich habe ein Beispiel bootstrap Gitter wie in this fiddle angegeben.

<div class="row"> 
    <div class="col-md-3 col-xs-3">left</div> 
    <div class="col-md-6 col-xs-6">Center</div> 
    <div class="col-md-3 col-xs-3">Right </div> 
</div> 

, die das Netz als zieht

Wenn es in kleineren Auflösung Geräte zu öffnen, gibt es so etwas wie (wenn es keine col-xs-* Klasse

Aber wie kann ich verwalten um das Gitter wie unten gezeigt in kleineren Auflösungsschirmen neu anzuordnen?

Answer 1

Sie könnten dies tun, aber Sie müssten die Reihenfolge der Quellen ändern.

.col{ 
 
    border: 1px solid #000; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="row"> 
 
    <div class="col col-md-push-3 col-md-6 col-xs-12">Center</div> 
 
    <div class="col col-md-pull-6 col-md-3 col-xs-6">left</div> 
 
    <div class="col col-md-3 col-xs-6">Right </div> 
 
</div>