Schieben Sie die mittlere Spalte nach oben auf kleinen Bildschirmen

Question

Ich habe 3 Spalten in einer Reihe. Die mittlere Spalte muss oben auf kleinen Bildschirmen mit der linken und dann der rechten darunter sein. I.E. großer Bildschirm 1 2 3, kleine Bildschirme 2 1 3. Ich konnte diesen Code nicht finden, der auf ähnlicher Frage gefunden wurde, um zu arbeiten.

<div class="row"> 
<div class="col-md-6 col-md-push-3"> 
    2 
</div> 
<div class="col-md-3 col-md-pull-6"> 
    1 
</div> 
<div class="col-md-3"> 
    3 
</div> 
</div> 

Irgendwelche Vorschläge?

Answer 1

div { 
 
\t width: 100%; 
 
\t height: 60px; 
 
\t border: 1px solid #000; 
 
\t background-color: #ccc; 
 
}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="row"> 
 
\t <div class="col-xs-6 col-md-6 col-md-push-3"> 
 
\t  2 
 
\t </div> 
 
\t <div class="col-xs-3 col-md-3 col-md-pull-6"> 
 
\t  1 
 
\t </div> 
 
\t <div class="col-xs-3 col-md-3"> 
 
\t  3 
 
\t </div> 
 
</div>

Answer 2

Das funktioniert einwandfrei.

<div class="container text-center"> 
<div class="row"> 
<div class="col-md-6 push-md-3"> 
<div class="alert alert-danger"> 
    1 
</div></div> 

<div class="col-md-3 pull-md-6"> 
<div class="alert alert-info"> 
    2 
</div></div> 

<div class="col-md-3"> 
<div class="alert alert-success"> 
    3 
</div> 
</div></div></div>