Ändern der Reihenfolge der Spalten mit Push und Pull Bootstrap

Question

Ich habe gerade die "push" und "pull" -Klassen in Bootstrap entdeckt, aber habe viel Mühe bei der Implementierung sie wie ich möchte. Auf XS Bildschirmen erscheint mein Inhalt wie folgt, was richtig ist:

|A||B||C| 

Aber auf SM-Bildschirme, ich muss es sein:

|B| 
|C| 
|A| 

Mein HTML ist unten. Ich habe versucht, "col-sm-push-10" zu dem div hinzuzufügen, das meine Schaltfläche enthält, aber das hat es einfach nach rechts innerhalb seiner eigenen div geschoben. Ich muss dieses Teil wirklich bewegen. Jede Hilfe würde sehr geschätzt werden !!

<div class="container-fluid"> 
    <div class="col-sm-4"> 
     <ul class="prod-group"> 
     <div class="col-xs-2 col-sm-10"> 
      <li><button type="button" class="btn">A</button></li> 
      </div> 
      <div class="col-xs-6 col-sm-10"> 
      <li>B</li> 
      </div> 
      <div class="col-xs-4 col-sm-10"> 
       <li>Cr</li> 
      </div> 
     </ul>  
    </div> 

Answer 1

Normalerweise möchten Sie, dass Elemente vertikal auf xs-Bildschirmen gestapelt werden und horizontal auf größeren (sm) Bildschirmen bleiben. Dies ist also ein ungewöhnlicher Fall, in dem Sie eigentlich das Gegenteil wollen. Erstellen Sie den Stapel sm Layout zuerst, dann justieren für xs mit Push-Pull ..

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-sm-4"> 
     <ul class="row prod-group"> 
      <li class="col-xs-6 col-sm-10 col-xs-push-2 col-sm-push-0"> 
       B 
      </li> 
      <li class="col-xs-2 col-sm-10 col-xs-pull-0 col-sm-pull-0"> 
       C 
      </li> 
      <li class="col-xs-4 col-sm-10 col-xs-pull-8 col-sm-pull-0"> 
       A 
      </li> 
     </ul> 
    </div> 
    </div> 
</div> 

Demohttp://www.codeply.com/go/yMxh8sGwMZ

Auch vergessen Sie nicht, Ihre Spalten in einem row für die richtige Polsterung zu halten.

Answer 2

Sie sollten Ihre Elemente schreiben, damit Sie auf -sm- sehen können. einstellen Dann ihre Position bei -xs-:

<div class="row"> 
    <div class="col-sm-12 col-xs-4 col-xs-push-4"> 
     B 
    </div> 

    <div class="col-sm-12 col-xs-4 col-xs-push-4"> 
     C 
    </div> 

    <div class="col-sm-12 col-xs-4 col-xs-pull-8"> 
     A 
    </div>  
</div> 

By the way, sollten Sie li verwenden nur als direkter Nachkomme von ul sowie nicht mit anderen Elementen wie div direkt innerhalb ul, weil es nicht gültig ist.