Bootstrap - Verwenden von Push/Pull mit Col-12?

Question

Ich habe gerade erst entdeckt Push/Pull mit Bootstrap, kann ich sehen, dass Sie sich als so die Spalten für unterschiedliche Bildschirmgrößen neu anordnen können: -

<div class="col-md-4 col-sm-4 col-md-push-0 col-xs-push-4">1</div> 
<div class="col-md-4 col-sm-4 col-md-pull-0 col-xs-pull-4">2</div> 
<div class="col-md-4 col-sm-4">3</div> 

Welche feinen, in dem obigen Beispiel arbeitet 2 kommt vor 1 auf kleineren Bildschirmen.

Wie wäre es, wenn ich die sm Spalten 12 wäre? Wie funktioniert das dann? Ich habe versucht: -

<div class="col-md-4 col-sm-12 col-md-push-0 col-xs-12 col-xs-push-12">1</div> 
<div class="col-md-4 col-sm-12 col-md-pull-0 col-xs-12 col-xs-pull-12">2</div> 
<div class="col-md-4 col-sm-12 col-xs-12">3</div> 

aber 1 und 2 verschwinden auf kleineren Bildschirmgrößen jetzt?

Also im Grunde bin zu wollen, ich erreichen: -

<div class="col-sm-12">2</div> 
<div class="col-sm-12">1</div> 
<div class="col-sm-12">3</div> 

für kleinere Geräte, wenn der Sinn macht?

Hier ist ein JSFIDDLE - Vielen Dank im Voraus!

Answer 1

Sie kehren Dinge um! Du schreibst deinen Basiscode auf 2,1,3, dann drückst du ihn, bis er so aussieht, wie du ihn auf einem größeren Bildschirm haben willst.

Das ist die ganze mobile erste Sache.

<div class="row"> 
    <div class="col-md-4 col-sm-4 col-md-push-4">2</div> <!-- Push Column --> 
    <div class="col-md-4 col-sm-4 col-md-pull-4">1</div> <!-- Pull Column --> 
    <div class="col-md-4 col-sm-4">3</div> 
</div> 

Fiddle

Dies bricht oben md aber Sie bekommen die Idee