Cambia ordine

Scritto da il

Questa “Guida completa per cambiare la posizione a qualsiasi elemento” vuole aiutarti nel caso in cui tu abbia un posizionamento di elementi che desideri che abbiano un ordinamento differente dall’usuale, questo è possibile mediante essenzialmente due soluzioni: con l’utilizzo delle regole CSS per le tabelle, oppure mediante l’utilizzo degli elementi mediante il display:flex e della regola order

Questo articolo segue le idee che mi sorsero scrivendo Centrare un elemento mediante CSS, la guida completa

Ecco come fare:

Guida completa per cambiare la posizione a qualsiasi elemento

1. Soluzione con il CSS per le tabellare

Poniamo che tu abbia:

il risultato, ovviamente che otterrai sarà:

ma con la seguente regola, capovolgerai l’orinamento.
Ecco la regola CSS

e questo è il risultato che otterrai

Come puoi ben immaginare il limite di tale regola è che vale solamente per un numero di div che non sia superiore ai 3.

2. Soluzione con il display:flex e order

Con le regole CSS che seguono puoi utilizzare il cambiamento dell’ordinamento a prescindere da quanti div hai, eccolo:

Questo è HTML

e queste sono le regole CSS

ottenendo

Fonte:
Vertical reordering of blocks with CSS
Swap DIV position with CSS only

Sergio Pinna

Web Designer, esperto in costruzione siti web lato client e server. Conosco il CSS, HTML semantico, PHP e Wordpress. Disegno per il web siti internet, sono appassionato di cinema, mi piace la musica rock, e faccio un lavoro che non smette di appassionarmi.