Bootstrap Spalte schieben/ziehen Problem

Question

Ich dachte, dass ich verstehe, wie pushing und pulling Spalten arbeiten ... aber ich denke, ich lag falsch. Ich habe die folgenden jsfiddle, wo ich ein sehr einfaches Gitter erstellt habe. Es sieht aus wie dieser während in xs:

Versicherter Namen

Nennwert

Geschlecht

Produkt

und dann, wenn ich in sm bin, sieht es wie so :

Versicherter Name | Gesicht Betrag

Geschlecht | Produkt

Ich bin bis jetzt alles gut. Wenn ich jedoch zu md komme, brauche ich die Felder Gesichtsstärke und Geschlecht, um die Plätze zu wechseln. Wie Sie (von der Geige) sehen können, versuchte ich push das FaceAmount Feld 6 Spalten (ich erwartete, dass dieses Feld dann in die nächste Zeile nach unten geschoben werden würde) und dann pull die Gender-Feld 6 Spalten (damit ziehen es eine Zeile) .

Wenn Sie jedoch die Geige zum Standpunkt md ziehen ... wird die FaceAmount-Spalte weit nach rechts weggedrückt (statt sich zu wickeln) und das Gender-Feld wird nach links bis zu dem Punkt gezogen, an dem Sie sich befinden kann es nicht mehr sehen.

Gibt es etwas, das ich vermisse? Ich hätte erwartet, dass, da ich das FaceAmount-Feld schob, die 12-Spalten-Marke passierte, die es einwickeln würde. In ähnlicher Weise habe ich erwartet, dass das Gender-Feld in die vorherige Zeile hochgezogen wird.

Answer 1

Ich glaube, Sie haben Recht mit den Worten:

ich das FaceAmount Feld am drängen geleitet, um die 12-Säule Marke

Auch Sie scheinen zu verstehen push und pull zu verwenden. Das Problem in der Jfiddle ist, dass Sie versuchen, zwischen zwei verschiedenen Zeilen neu anzuordnen. Zum Beispiel können Sie Insured Name schieben und ziehen Face Amount mit:

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-6 col-md-4"> 
      <div class="well"> 1 </div> 
     </div> 
     <div class="col-sm-6 col-sm-push-0 col-md-4 col-md-push-4"> 
      <div class="well"> 3 </div> 
     </div> 
     <div class="col-sm-6 col-sm-pull-0 col-md-4 col-md-pull-4"> 
      <div class="well"> 2 </div> 
     </div> 

     <div class="clearfix hidden-sm"></div> 

     <div class="col-sm-6 col-md-4"> 
      <div class="well"> 4 </div> 
     </div> 
     <div class="col-sm-6 col-md-4"> 
      <div class="well"> 5 </div> 
     </div> 
     <div class="col-sm-6 col-md-4"> 
      <div class="well"> 6 </div> 
     </div> 
    </div> 
</div> 

Ergebnis:

Aber während zwischen den verschiedenen Reihen tun es nicht so funktioniert. Von this Artikel:

Wie drücken und ziehen funktioniert durch Festlegen einer linken oder rechten Eigenschaft wird es nie zu einer anderen Zeile umbrechen, wie Sie festgestellt haben.

Here ist ein sehr guter Artikel zu verstehen, wie Push und Pull funktioniert.

Answer 2

Diese Arbeit! http://jsfiddle.net/ujrwyrbr/68/

<div class="row"> 
          <div class="col-sm-6 col-md-12"> 
           <div class="row"> 
            <div class="col-md-6"> 
             <div class="row"> 
              <div class="row"> 
               <div class="col-xs-6"> 
                Insured Name: 
               </div> 
               <div class="col-xs-6"> 
                Some Name 
               </div> 
              </div> 
             </div> 
            </div> 
            <div class="col-md-6"> 
             <div class="row"> 
              <div class="col-xs-6"> 
               Face Amount: 
              </div> 
              <div class="col-xs-6"> 
               Some Amount 
              </div> 
             </div> 
            </div> 
           </div> 
          </div> 
          <div class="col-md-12 col-sm-6"> 
           <div class="row"> 
            <div class="col-md-6"> 
             <div class="row"> 
              <div class="col-xs-6"> 
               Gender: 
              </div> 
              <div class="col-xs-6"> 
               Male 
              </div> 
             </div> 
            </div> 
            <div class="col-md-6"> 
             <div class="row"> 
              <div class="col-xs-6"> 
               Product: 
              </div> 
              <div class="col-xs-6"> 
               Some Product 
              </div> 
             </div> 
            </div> 
           </div> 
          </div> 
         </div> 

Answer 3

Sie können diese an die Arbeit, wenn Sie die col-md-3 Ansichtsfenster auf md verwenden können, und zeigen vier Spalten breit.

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-12 col-sm-6 col-md-3"> 
      <div class="row"> 
       <div class="col-xs-6 trRight"> 
        Insured Name: 
       </div> 
       <div class="col-xs-6 trLeft"> 
        x 
       </div> 
      </div> 
     </div> 
     <div class="col-xs-12 col-sm-6 col-md-3 col-md-push-3"> 
      <div class="row"> 
       <div class="col-xs-6 trRight"> 
        Face Amount: 
       </div> 
       <div class="col-xs-6 trLeft"> 
        x 
       </div> 
      </div> 
     </div> 


     <div class="col-xs-12 col-sm-6 col-md-3 col-md-pull-3"> 
      <div class="row"> 
       <div class="col-xs-6 trRight"> 
        Gender: 
       </div> 
       <div class="col-xs-6 trLeft"> 
        x 
       </div> 
      </div> 
     </div> 
     <div class="col-xs-12 col-sm-6 col-md-3"> 
      <div class="row"> 
       <div class="col-xs-6 trRight"> 
        Product: 
       </div> 
       <div class="col-xs-6 trLeft"> 
        x 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Beachten Sie auch, dass verschachtelte cols innerhalb eines anderen row sein sollte. http://www.codeply.com/go/AMAmnvznK6