Ordinamento di colonne in Bootstrap 4 con push / pull e col-md-12

Ho due colonne con la class col-md-12 ciascuna.

Nella visualizzazione desktop dovrebbero essere visualizzati come:

 Col **1** Col **2** 

Nella visualizzazione mobile, dovrebbe essere visualizzato in questo modo:

 Col **2** Col **1** 

Questo è ansible anche con l’ordinamento delle colonne di Bootstrap?

Il mio codice attuale:

 
Col 1
Col 2

AGGIORNAMENTO (FEB 2018) – v4.0.0

Ora che il bootstrap è stato rilasciato, è ansible ottenerlo utilizzando le classi di utilità order , come è stato ansible farlo nella versione beta (vedere il vecchio aggiornamento di seguito), con la differenza che hanno aggiunto queste 3 nuove classi:

 .order-first { -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; } .order-last { -webkit-box-ordinal-group: 14; -ms-flex-order: 13; order: 13; } .order-0 { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } 

Frammento

 .p-2 { background: red; border: white 5px solid } 
  
1
2

Aggiornamento 2018 – Bootstrap 4.1.0

Ora a piena larghezza, 12 colonne col-*-12 possono essere invertite utilizzando l’ ordine flexbox .

Nelle versioni precedenti di Bootstrap 4 alpha e beta le utilità di ordinamento erano flex-*

 
Col 1
Col 2

Demo Bootstrap 4 Alpha

A partire da Bootstrap 4.0.0 gli utils degli order-* sono ordinati- order-*

 
Col 1
Col 2

Demo Bootstrap 4.1.0

Vedi i documenti su https://getbootstrap.com/docs/4.0/layout/grid/#order-classs

Un modo per aggirare questo è fare due versioni di Col 2 e metterne uno sopra il Col 1 e uno sotto. Quindi utilizzare le utilità reattive per hide e mostrare di conseguenza.

È ansible utilizzare flexbox , quindi è ansible utilizzare le query multimediali per modificare l’ordine:

 .row { /* Setup Flexbox */ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; /* Reverse Column Order */ -webkit-flex-flow: column-reverse; flex-flow: column-reverse; } 

CODEPEN

oppure (ordine predefinito su cellulari e tablet, reverse sul desktop):

 @media (min-width: 992px) { .row { /* Setup Flexbox */ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; /* Reverse Column Order */ -webkit-flex-flow: column-reverse; flex-flow: column-reverse; } } 

CODEPEN