Bootstrap a destra Colonna in alto nella visualizzazione mobile

Ho una pagina di bootstrap come questa:

A
B

Sembra:

 ----- |A|B| ----- 

Quindi se lo guardo su un dispositivo mobile, la colonna A è in cima, ma voglio la B in cima. È ansible? L’ho provato con una spinta, ma non ha funzionato.

Usa l’ ordinamento della colonna per fare ciò. Vedi anche questo articolo su come ordinare le colonne

col-md-push-6 “spingerà” la colonna a destra 6 e col-md-pull-6 “tirerà” la colonna a sinistra su “md” o più grandi porte di vista. Su qualsiasi vista più piccola-porte le colonne saranno di nuovo nell’ordine normale.

Penso che quello che butta via la gente, è che devi mettere B sopra A nel tuo HTML . Potrebbe esserci un modo diverso per fare ciò in cui A può andare sopra B nell’HTML, ma non sono sicuro di come farlo …

DEMO

 
B
A

view-port> = md

 |A|B| 

view-port

 |B| |A| 

Vale la pena notare che se si utilizzano colonne che non sono entrambe uguali a 6, l’importo del push non sarà uguale alla dimensione della colonna iniziale.

Se hai 2 colonne (A e B) e desideri che la colonna A sia più piccola ea destra su “sm” o windows più grandi, ma sopra una finestra mobile (xs), devi usare quanto segue:

 
A
B

Altrimenti, l’allineamento delle colonne apparirà off.

Direzione Flexbox

Per Bootstrap 4, applica una delle seguenti opzioni al tuo .row div:

 .flex-row-reverse 

Per le impostazioni sensibili:

 .flex-sm-row-reverse .flex-md-row-reverse .flex-lg-row-reverse .flex-xl-row-reverse 

Il codice seguente funziona per me

 .row { display: flex; flex-direction: column-reverse; } 

Ero solito:

 .row { display: flex; flex-direction: row-reverse; } 

Ora questo è fatto (in Bootstrap v4) aggiungendo classi order- #.

Vedi https://getbootstrap.com/docs/4.1/migration/#grid-system-1

Come questo:

 
...

In Bootstrap V4 (rilasciato il 18 gennaio 2018) è ansible utilizzare le classi di riordino. Informazioni qui sotto la scheda Riordino.

https://getbootstrap.com/docs/4.0/layout/grid/