Bootstrap con diversi ordini su versione mobile

Ho 2 colonne e fila annidata nella colonna di destra, come posso rendere bootstrap reattivo come di seguito,

disposizione :

desktop version --------- ------ | 2 || 1 | | || | | |------- | || 3 | | || | | |------- | | | | --------- mobile version (stacked in order) -------- | 1 | | | -------- | 2 | | | | | | | | | | | -------- | 3 | | | -------- 

questo è il mio codice:

 
1
3
2

Con questo codice l’ordine nella versione mobile 1 3 2, quello che voglio è 1 2 3.

Poiché Bootstrap 4 utilizza la flexbox, le colonne avranno sempre un’altezza uguale e non sarà ansible ottenere il layout desktop (lg) che si desidera. La soluzione è disabilitare il flexbox per lg . Usa i galleggianti in modo che le 1,3 colonne tirino naturalmente verso destra, poiché 2 è più alto. L’ordine di flexbox funziona su dispositivi mobili.

https://www.codeply.com/go/8lsFAU3C5E

 
2
1
3

Come funziona

  • Mantieni le colonne nella stessa riga, poiché l’ordine è relativo al genitore
  • Il d-flex d-lg-block disabilita il flex su lg e su
  • Il float-left galleggiare le colonne quando flex è disabilitato
  • L’ order-* riordina le colonne quando flex è abilitato

BAC -> ABC

Per ottenere ciò in Bootstrap 4, è necessaria la class order-lg-first per la colonna “2” e la class offset-lg-8 per la colonna “3” (supponendo che siano ordinate 1-2-3 nell’HTML) .

La class offset-lg-8 compenserà (ovvero spingerà verso destra) la terza colonna di 8 unità (= uguale alla larghezza della seconda colonna) su schermi di dimensioni maggiori ( lg ) o più grandi, producendo così il risultato desiderato.

Ecco uno snippet di codice funzionante (fai clic su “Esegui snippet di codice” di seguito ed espandi la pagina intera):

  
1
2
3

Puoi usare push e pull per cambiare l’ordine delle colonne. Vedi maggiori informazioni qui

 
B
A
C