Yocker
  1. Yocker
  3. Bootstrap con diversi ordini su versione mobile
Intereting Posts
Visualizzazione del sito Web localhost dal dispositivo mobile Come posso aggiungere oggetti CGPoint a un NSArray in modo semplice? SmtpClient con Gmail Posso avere un JTabbedPane con una JMenuBar? I migliori modi di analizzare un URL usando C? jQuery: esecuzione di richieste sincrone AJAX Divisione semplice in Java: si tratta di un bug o di una funzionalità? Java ottiene la memoria disponibile Il segno (+) di Javascript concatena anziché dare la sum delle variabili Il prompt dei comandi VS2010 restituisce un errore: Imansible determinare la posizione della cartella VS Common Tools Spring Data JPA e NamedEntityGraphs Chiama una funzione denominata in una variabile stringa in C WinRT / UWP Frame e Page caching: come creare una nuova istanza di pagina su Naviga () e mantenere l’istanza di pagina su GoBack () Come posso rilevare un errore di post della query Ajax? Dalla libreria statica MinGW (.a) alla libreria statica di Visual Studio (.lib)

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