Bootstrap 4x: puoi modificare l'ordine delle colonne in base alle dimensioni della finestra?

Blog

Bootstrap 4x: puoi modificare l'ordine delle colonne in base alle dimensioni della finestra?

Bootstrap è ottimo per la sua capacità di riordinare le colonne indipendentemente dalla struttura HTML, tuttavia vorrei avere un ordine diverso di questi elementi particolari quando si trova in una dimensione di viewport più piccola (ad esempio Mobile).



La struttura dell'HTML è qualcosa del tipo:

[Page Content] [Nav Links] [Sidebar] 

E utilizzando Bootstrap 4.1 e le sue classi order-first/order-last su [Nav Links] e [Sidebar] rispettivamente, la pagina viene visualizzata in questo modo:



[Nav Links] [Page Content] [Sidebar] 

Tuttavia, cosa mi piacerebbe che accadesse quando il viewport si riduce al di sotto della soglia di interruzione, affinché [Nav Links] torni sotto [Page Content] come un bravo ragazzino. La documentazione di Bootstrap non sembra entrare in questo tipo di implementazione e, sebbene qui abbia trovato una domanda simile per una versione precedente di Bootstrap, i metodi descritti utilizzano classi che sono state rimosse da allora. Qualcuno ha dei suggerimenti?

(Segue il codice effettivo, nel caso in cui mi sia perso qualcosa)



 [Page Content] [Nav Links] [Sidebar Content] 


#html #css #bootstrap