Su desktop le colonne vengono visualizzate correttamente: testo a sinistra, immagine a destra. Apri il sito su un telefono e l'immagine compare per prima, mentre la spiegazione scorre più in basso, sotto la piega.

Ti suona familiare? Il motivo è che sui dispositivi mobili l'intero layout collassa in un'unica colonna e l'ordine dei blocchi rimane fisso: ciò che viene prima nell'HTML appare in cima. Nessuno vuole modificare l'HTML solo per il mobile: significherebbe duplicare sezioni o usare escamotage con display: none.

I CSS offrono uno strumento che risolve questo problema senza toccare il markup: la proprietà order abbinata a flexbox. Una riga in una media query e i blocchi si scambiano di posto.

💡 Panoramica rapida:

• Come flexbox controlla l'ordine dei blocchi senza modificare l'HTML
• Codice CSS per invertire due colonne su mobile
• Come applicare le classi tramite un page builder (usando King Composer come esempio)
• Uno snippet pronto all'uso: copialo, sostituisci le tue classi, testalo

Come funziona la proprietà order dei CSS: i concetti essenziali

Flexbox non si limita ad allineare elementi in orizzontale e in verticale. Ogni elemento flex ha una proprietà numerica order che ne determina la posizione visiva indipendentemente dal suo posto nell'HTML.

Per impostazione predefinita, tutti gli elementi hanno order: 0, quindi appaiono nell'ordine in cui sono scritti nel codice. Ma non appena assegni order: 1 a un blocco e order: 2 a un altro, il browser li riordina. Il numero più basso viene sempre per primo.

La parte più utile: order funziona all'interno di una media query. Su desktop, i blocchi restano nelle loro posizioni normali, ma su schermi con larghezza inferiore a 768px si scambiano di posto. Nel frattempo, l'HTML rimane intatto, i motori di ricerca vedono l'ordine originale e l'accessibilità non ne risente. MDN conferma: l'ordine visivo cambia, ma l'ordine di tabulazione no (a patto di non toccare tabindex).

Nota che order funziona solo all'interno di un contenitore flex. Il blocco genitore deve avere display: flex o display: inline-flex. Senza, la proprietà order viene ignorata.

Analisi passo passo: applicare order nella pratica

Considera una sezione tipica: due colonne in fila su desktop, impilate su mobile. L'obiettivo: sui telefoni, la seconda colonna (immagine) deve comparire PER PRIMA, e la prima colonna (testo) per seconda.

Passo 1: preparare la struttura HTML

Il markup di base è composto da un contenitore genitore e due blocchi figli. L'ordine nell'HTML: prima il testo, poi l'immagine. Questa è esattamente la struttura che genera la maggior parte dei page builder, incluso King Composer.

1
<div class="section-wrapper">
2
  <div class="block-text">Текст и пояснение слева</div>
3
  <div class="block-image">Картинка справа</div>
4
</div>

Passo 2: scrivere il CSS

Per prima cosa, rendi il contenitore un contenitore flex a tutte le risoluzioni. Poi, nella media query per il mobile, assegna a ciascun blocco il proprio order e allargali a tutta la larghezza.

Aggiungi questo codice in Bacheca → Aspetto → Personalizza → CSS aggiuntivi nel tuo tema o tramite il plugin Code Snippets. Non modificare direttamente i file del tema, perché i tuoi stili andranno persi con l'aggiornamento.

1
.section-wrapper {
2
    display: flex;
3
    flex-flow: wrap;
4
}
5
 
6
@media screen and (max-width: 767px) {
7
    .block-image {
8
        order: 1;
9
        width: 100%;
10
    }
11
 
12
    .block-text {
13
        order: 2;
14
        width: 100%;
15
    }
16
}

Analisi: su desktop, entrambi i blocchi sono normali elementi flex con order: 0 (il valore predefinito secondo le specifiche). Testo a sinistra, immagine a destra, come nell'HTML. Su schermi con larghezza inferiore a 768px, entra in gioco la media query: .block-image riceve order: 1, spostandolo per primo; .block-text riceve order: 2, posizionandolo per secondo. width: 100% fa sì che i blocchi occupino l'intera larghezza dello schermo in orizzontale.

Punto chiave: le classi .block-text e .block-image sono una tua convenzione di denominazione. In un progetto reale, farai riferimento alle classi generate dal tuo page builder o tema.

Passo 3: come assegnare le classi in un page builder

Approccio universale: qualsiasi builder visuale (Elementor, Bricks, il legacy King Composer, Gutenberg nativo tramite gruppo) permette di aggiungere una classe CSS personalizzata a sezioni e colonne. Gli screenshot qui sotto mostrano il processo nell'interfaccia di King Composer, ma la logica è la stessa ovunque: trova il campo "Classe CSS" o "Classe extra" nelle impostazioni di riga/colonna e inserisci il nome desiderato.

Una sezione a due colonne in King Composer si presenta così:

Assegna la classe section-wrapper al contenitore genitore (la riga):

Assegna la classe block-text alla colonna di sinistra:

Assegna la classe block-image alla colonna di destra:

Dopo aver salvato e pubblicato, controlla la pagina su un telefono o tramite i DevTools del browser (F12 → Attiva/Disattiva barra degli strumenti del dispositivo). I blocchi dovrebbero scambiarsi di posto: immagine in alto, testo in basso.

Come adattare questo metodo al tuo progetto

Tre scenari tipici e cosa modificare nel codice:

Stai usando un page builder diverso. Trova il campo della classe CSS personalizzata nelle impostazioni di sezione/colonna. In Elementor, è Avanzate → Classi CSS; in Bricks, è Impostazioni → ID CSS e Classi. Inserisci i nomi delle tue classi e aggiorna di conseguenza i selettori CSS.

Stai scrivendo codice a mano senza un page builder. Ancora più semplice: scrivi le classi necessarie direttamente nel markup HTML del tuo template. Il codice CSS resta lo stesso; adatta solo i selettori al tuo markup.

Hai tre o più blocchi invece di due. Aggiungi una regola per ogni blocco nella media query con il proprio valore order. Ad esempio: .block-a { order: 1; }, .block-b { order: 2; } e .block-c { order: 3; }. I numeri non devono essere consecutivi; puoi usare order: 10 per garantire che un elemento venga spostato in fondo.

Assicurati che il contenitore genitore abbia display: flex; senza, order viene ignorato silenziosamente e perderai mezz'ora a fare debug. Lo scenario più comune: il contenitore ha come impostazione predefinita display: block, flex viene applicato ma sovrascritto da una regola del tema più specifica. DevTools → Calcolati ti mostrerà il valore finale.

Guarda questo breve video sull'argomento, che dimostra chiaramente come order riordina i blocchi in tempo reale:

⁉️🤔 Domande frequenti

Order funziona in tutti i browser?

order è supportato da tutti i browser moderni dal 2015, inclusi Safari su iOS e Chrome su Android. Secondo i dati di caniuse.com, il supporto globale di flexbox è del 99,2%. Se hai bisogno del supporto per IE11 (che comprende flexbox ma ha dei bug), aggiungi -ms-flex-order con lo stesso valore.

Order compromette l'indicizzazione sui motori di ricerca?

No. I crawler dei motori di ricerca leggono l'HTML sorgente della pagina e order modifica solo l'ordine visivo nel browser. Google conferma: le riorganizzazioni CSS non influenzano il posizionamento. L'ordine originale del contenuto nell'HTML rimane invariato.

Perché il mio order non funziona?

Tre motivi più comuni: (1) il blocco genitore non ha display: flex; (2) la media query è sovrascritta da una regola del tema più specifica; (3) l'elemento figlio ha un valore display diverso da block (come inline). Diventa comunque un elemento flex, ma il comportamento potrebbe differire. Apri DevTools, scheda Elementi → Calcolati: verifica se il tuo order è applicato e non è barrato.

Posso cambiare l'ordine usando CSS Grid invece di flexbox?

Sì. Grid ha una proprietà order che funziona in modo identico. Inoltre, Grid offre un'alternativa: puoi impostare grid-row e grid-column per un posizionamento esplicito degli elementi senza order. Ma se hai semplicemente una riga di due colonne, flexbox è più semplice (meno codice).

Cosa succede se il mio page builder non permette di aggiungere una classe personalizzata?

Alcuni builder più vecchi o in versione ridotta non mostrano il campo Classe CSS. In tal caso: (1) avvolgi la sezione in un gruppo e assegna la classe al gruppo; (2) usa il selettore CSS integrato del builder (ad esempio, .kc-column-12a3b per King Composer), che puoi trovare tramite DevTools; (3) passa a Gutenberg con un contenitore gruppo, dove ogni blocco ha un campo "Classe CSS aggiuntiva" nel pannello di destra.

Punti chiave sull'inversione dell'ordine dei blocchi

La proprietà CSS order è il modo più semplice per controllare la sequenza visiva dei blocchi senza modificare l'HTML. La flessibilità si ottiene con tre righe in una media query: imposta display: flex sul contenitore, assegna order: 1 e order: 2 ai blocchi figli al breakpoint mobile, e il gioco è fatto.

Il percorso di implementazione più sicuro: aggiungi i CSS tramite Aspetto → Personalizza → CSS aggiuntivi o il plugin Code Snippets; non toccare i file del tema. Prima di pubblicare, testa la pagina tramite DevTools su un emulatore iPhone e su un dispositivo reale. Se order non funziona, controlla prima il valore Calcolato di display del contenitore.

Hai provato questo metodo sul tuo sito? Condividi nei commenti quale page builder hai usato e cosa hai invertito.