Classi di riordino bootstrap Order
Ovvero come cambiare l'ordine visivo dei contenuti di una pagina HTML spostando le colonne all’interno di un container in maniera reattiva

Html e css
Autore:

Quando parliamo di ottimizzazione di una pagina web saltano subito in mente tutte quelle attività finalizzate ad aumentarne le prestazioni sia in termini di volume di traffico che di leggibilità su dispositivi con monitor di dimensioni e risoluzioni anche molto diverse tra loro (per esempio il monitor di un PC e il monitor di uno smartphone).

Uno strumento che può aiutarci a centrare in un solo “colpo” entrambi gli obbiettivi sono le classi di riordino bootstrap, in quanto consentono di cambiare l'ordine visivo dei contenuti (testuali e grafici) in maniera responsive.

E perché cambiare l’ordine visivo dei contenuti può aiutarci ad ottimizzare la nostra pagina web?

  1. Da un punto di vista di posizionamento sui motori di ricerca può essere utile perché posizionare il testo che vogliamo indicizzare in cima alla pagina in termini SEO ha il suo maggiore valore mentre, in termini comunicativi, avere un’immagine in testa a un articolo potrebbe essere molto più efficace.

  2. Da un punto di vista di responsive web design, dato che le “Order classes” sono delle classi bootstrap, ci consentono con molta facilità di assegnare dei valori assecondo delle varie risoluzioni.


Reordering - Order classes


Il comando che ci consente di fare tutto questo è class="col order-n", dove “n” equivale ad un numero compreso tra 1 e 12, a secondo della colonna in cui vogliamo spostare il nostro div.

  • In alternativa ai numeri 1 e 12 possiamo utilizzare rispettivamente “first” e “last”.

  • Trattandosi di classi reattive è possibile impostare un punto di interruzione per definire il riordino in funzione della risoluzione (ad es .order-1 .order-md-2).


Esempio di utilizzo delle classi di riordino Order classes


HTML

<div class="row align-items-center bg-secondary text-white">

<div class="col-12 col-sm-6 p-5 text-center text-sm-right">
<h2>Bootstrap 4</h2>
<h3>Classi di riordino "Order"</h3>
<p>Utilizza la classe .order per controllare l'ordine visivo dei tuoi contenuti.</p>
</div>

<div class="col-12 col-sm-6 p-5 text-center text-sm-left order-last">
<h2>Spostare infondo</h2>
<h3>Classe di riordino "Order-last"</h3>
<p>Utilizza la classe .order-last per spostare questo blocco di testo infondo.</p>
</div>

<div class="col-12 col-sm-6 p-0 order-first order-sm-1"><img class="w-100" src="img1.jpg"></div>
<div class="col-12 col-sm-6 p-0 order-12"><img class="w-100" src="img2.jpg"></div>

</div>

Questo è il risultato su desktop




Bootstrap 4


Classi di riordino "Order"


Utilizza la classe .order per controllare l'ordine visivo dei tuoi contenuti.




Spostare infondo


Classe di riordino "Order-last"


Utilizza la classe .order-last per spostare questo blocco di testo infondo.








Questo è il risultato su mobile




Bootstrap 4


Classi di riordino "Order"


Utilizza la classe .order per controllare l'ordine visivo dei tuoi contenuti.




Spostare infondo


Classe di riordino "Order-last"


Utilizza la classe .order-last per spostare questo blocco di testo infondo.







Articoli in evidenza

Target e Personas

Cosa sono e come usarli per vendere di più sul web

Come si evolve il SEO, migliorare il posizionamento su google.

Gli aggiornamenti dell' algoritmo di google.

A scuola di contenuti

Oggi parliamo di come scrivere un buon articolo per essere letti nel web

Quanto costa fare un sito

Scopri il prezzo giusto per fare un sito internet

I più visti

Font-size CSS per una tipografia fluida e responsive.

px – em – rem – vw – vh – vmin – emax: la guida alle unità di misura dei font, per capirne le differenze, come e quando utilizzarle

Usare i CSS per creare splendidi effetti di sovrapposizione di testi, immagini e colori

Ovvero come realizzare le dissolvenze e i mascheramenti tipici dei programmi più avanzati di fotoritocco con gli attributi CSS Mix-blend-mode e background-clip: text

Come realizzare uno schema colori professionale per un sito web.

Ovvero adatto al prodotto/servizio di cui si occupa la tua interfaccia, accessibile a tutti e in grado di condizionare le conversioni e le scelte dei tuoi utenti

Automatizzare combinazioni di colori armoniose sul tuo sito web con LESS

Ovvero come passare dalla teoria del colore alla pratica della programmazione di un sistema di colori generato da un colore primario

Centrare un DIV dentro un altro DIV

5 metodi per centrare un DIV in orizzontale e in verticale in una pagina HTML con gli stili CSS, o all’interno di una pagina reattiva bootstrap