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

CSS mix-blend-mode

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

Teoria-dei-colori-e-less-in-website | come generare colori perfetti nel tuo sito web

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 n una pagina HTML o all’interno di una pagina reattiva bootstrap

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

Autore: Bagnai Daniele

I variable fonts

l'innovazione dei fonts per il web

Html e css
I variable font sono una nuova specifica di font usabili sui siti web che permette di avere uno stile grafico accattivante, moderno e professionale ma riducendo il problema dei tempi di caricamento dei font personalizzati.
La ... ➔
CSS per creare contenitori obliqui
Autore: Sanchini Mirco

CSS per creare contenitori obliqui o con forme geometriche complesse.

SVG, clip-path, transform skew, border radius, sono le tecniche CSS usate per creare splendide intestazioni non rettangolari in un file HTML, qual è la migliore?
Html e css
Chi come me progetta pagine web arriva sempre al punto in cui deve trovare il modo di collimare la necessità di evidenziare alcuni specifici messaggi all’interno di una certa quantità di contenuto. È ... ➔
Autore: Sanchini Mirco

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
Html e css
In questa rubrica spiegherò le caratteristiche delle unità di misura dei caratteri di un testo sul web, soffermandomi su quali, quando e perché utilizzarle per ottenere una tipografia fluida, ossia scalata, leggibile ... ➔
css propriety background clip text
Autore: Sanchini Mirco

Testi e contenitori sfumati con la proprietà CSS background-clip

Ovvero come estendere il colore o l’immagine di sfondo di un elemento ai suoi vari livelli, dal testo fino ai bordi del suo contenitore.
Html e css
In questo tutorial spiegherò la proprietà CSS background-clip. Una di quelle proprietà CSS che non capita spesso di usare e che personalmente ho iniziato ad apprezzare quando mi è capitato di applicare ai ... ➔
CSS mix-blend-mode
Autore: Sanchini Mirco

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
Html e css
Oggi vi spiegherò come usare i CSS per creare splendidi effetti di dissolvenza e mascheramento con testi, immagini e colori, quegli effetti che di solito si ottengono con i programmi più avanzati di fotoritocco. I vantaggi ... ➔
Autore: Sanchini Mirco

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
Html e css
Ogni volta che ci troviamo a realizzare un sito web, o un’applicazione, o una qualsivoglia interfaccia grafica, arriva sempre il momento in cui dobbiamo fare i conti con i colori. È un passaggio obbligato! Un nuovo progetto, ... ➔
Teoria-dei-colori-e-less-in-website | come generare colori perfetti nel tuo sito web
Autore: Sanchini Mirco

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
Html e css
Durante la creazione di un sito web l’uso del colore è un passaggio obbligato per ogni web master. Molto spesso è il colore del logo aziendale a suggerirci la direzione, tuttavia abbinarlo efficacemente ai ... ➔
Order-classes-bootstrap-4
Autore: Sanchini Mirco

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
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 ... ➔
Centrare un DIV dentro un altro DIV n una pagina HTML o all’interno di una pagina reattiva bootstrap
Autore: Sanchini Mirco

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
Html e css
In questo articolo vi spiegherò alcuni metodi per centrare verticalmente e orizzontalmente un DIV, per esempio un logo al centro di una schermata o un testo al centro di un banner, in una semplice pagina HTML o all’interno ... ➔
Immagini responsive, come ottimizzare le immagini in un sito web
Autore: Sanchini Mirco

Immagini responsive

Ovvero un metodo alternativo ai CSS per ottimizzare la visualizzazione delle immagini su diversi dispositivi ... con minore lavoro e minore margine di errore
Html e css
Oggi parleremo di come ottimizzare le immagini in un sito web, così da visualizzarle al meglio su dispositivi con monitor di dimensioni e risoluzioni anche molto diverse tra loro (per esempio il monitor di un PC e il monitor ... ➔