Spingendo colonna alla riga successiva con *

Question

Ho i seguenti blocchi 6 costruzione col-md-push:

[1][2] 
[3][4] 
[5][6] 

Tutti i blocchi hanno una classe col-SM-6 in una riga. Ma poiché il blocco 3 supera la struttura di bootstraps 12 colonne, salterà alla riga successiva. Perfetto è quello che voglio.

L'unica cosa è, voglio scambiare il blocco 2 e 3. Ma funziona solo per i blocchi sulla stessa linea. Quindi 1 e 2 possono scambiare, ma 2 e 3 non (in modalità SM)

<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-6 col-md-4 col-md-push-0"> 
     <div class="well"> 2 </div> 
    </div> 
    <div class="col-sm-6 col-sm-pull-6 col-md-4 col-md-pull-0"> 
     <div class="well"> 3 </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> 

Creerà:

[1] [2] 
[3] [4] 
    [5][6] 

Vedi http://www.bootply.com/127062

Answer 1

Hai ragione, non v'è nessun modo per passare alla riga successiva in Bootstrap 3.x.

Ma, se si pensa "Mobile prima", si dovrebbe prima creare il layout sm, e quindi spingere/tirare conseguenza per schermi più grandi ..

<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> 

http://www.bootply.com/127076

Aggiornamento Bootstrap 4.x

Ora con gli stivali trappola 4 Beta it's possible to "push" or "pull" columns to the next "row" utilizzando le classi di ordinazione Flexbox:

https://www.codeply.com/go/MELnKiqofA