Bootstrap Push/Pull-Spalte Ausgabe

Question

Ich habe 4 Spalten wie diese

<div class="container"> 
    <div class="row"> 
    <div class="col-md-3"> col3</div> 
    <div class="col-md-1"> col1</div> 
    <div class="col-md-4"> col4</div> 
    <div class="col-md-4"> col4</div> 
    </div> 
</div> 

Normalerweise sieht es wie folgt aus:
[3] [1] [4] [4]

Wenn es in kleinere Ansichtsfenster, möchte ich es so zeigen:
[4]
[4]
[3]
[1]

Ich habe

versucht

<div class="container"> 
     <div class="row"> 
     <div class="col-md-3 col-md-push-8"> col3</div> 
     <div class="col-md-1 col-md-push-8"> col1</div> 
     <div class="col-md-4 col-md-pull-4"> col4</div> 
     <div class="col-md-4 col-md-pull-4"> col4</div> 
     </div> 
    </div> 

Es zeigt:
In großen Ansichtsfenster:
[4] [4] [3] [1]

In Ansichtsfenster, dass diese Spalten Zusammenbruch:
[3
] [1]
[4]
[4]
Aber es scheint, wie das, was ich völlig umgekehrt haben wird ...
A erstellt ein codepen Schnipsel http://codepen.io/ngp130895/pen/Kzxdpj Wie kann ich das erreichen?

Answer 1

können Sie die Lösung in diesem link

Answer 2

Div ist ein Element block und jedes neue div gehen an die Spitze der Linie. Für fix dieses Problem haben zwei Wege:

Verwenden Tag
einen Code CSS für Etikettieren inline wurde

Für die erste Art und Weise Sie nur Tag <div> mit <span ändern muss. Für die letzte Art und Weise können Sie es verwenden:

div.container > div.row > div { 
 
    display: inline; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-3"> col3</div> 
 
    <div class="col-md-1"> col1</div> 
 
    <div class="col-md-4"> col4</div> 
 
    <div class="col-md-4"> col4</div> 
 
    </div> 
 
</div>

Answer 3

ich eine Abhilfe für dieses gefunden. Das sieht irgendwie blöd aus, aber es funktioniert.

<div class="container"> 
     <div class="row"> 

     <div class="col-md-4 col-md-push-4"> col4</div> 
     <div class="col-md-4 col-md-push-4"> col4</div>   
     <div class="col-md-3 col-md-pull-8"> col3</div> 
     <div class="col-md-1 col-md-pull-8"> col1</div> 

     </div> 
</div> 

Edit: Ich fand, dass dies tatsächlich der richtige Weg. Mobile Ansicht sollte standardmäßig geschrieben werden, und ein größeres Ansichtsfenster wird durch Drücken und Ziehen der Spalten geändert.