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:
<div id="example"> <div id="block-1">Primo</div> <div id="block-2">Secondo</div> <div id="block-3">Terzo</div> </div>
il risultato, ovviamente che otterrai sarà:
Primo Secondo Terzo
ma con la seguente regola, capovolgerai l’orinamento.
Ecco la regola CSS
#example {display: table; width: 100%; } #block-1 {display: table-footer-group; } /* Sarà mostrato alla fine della pseudo-tabella */ #block-2 {display: table-row-group; } /* Sarà mostrato nel mezzo */ #block-3 {display: table-header-group; } /* Sarà mostrato in alto */
e questo è il risultato che otterrai
Terzo Secondo Primo
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
<div class="container"> <div class="div-1">PRIMO</div> <div class="div-2">SECONDO</div> <div class="div-3">TERZO</div> <div class="div-4">QUARTO</div> <div class="div-5">QUINTO</div> <div class="div-6">SESTO</div> </div>
e queste sono le regole CSS
.container { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; /* optional */ -webkit-box-align: start; -moz-box-align: start; -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start; } .container .div-1 { -webkit-box-ordinal-group: 6; -moz-box-ordinal-group: 6; -ms-flex-order: 6; -webkit-order: 6; order: 6; } .container .div-2 { -webkit-box-ordinal-group: 5; -moz-box-ordinal-group: 5; -ms-flex-order: 5; -webkit-order: 5; order: 5; } .container .div-3 { -webkit-box-ordinal-group: 4; -moz-box-ordinal-group: 4; -ms-flex-order: 4; -webkit-order: 4; order: 4; } .container .div-4 { -webkit-box-ordinal-group: 3; -moz-box-ordinal-group: 3; -ms-flex-order: 3; -webkit-order: 3; order: 3; } .container .div-5 { -webkit-box-ordinal-group: 2; -moz-box-ordinal-group: 2; -ms-flex-order: 2; -webkit-order: 2; order: 2; } .container .div-6 { -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; -ms-flex-order: 1; -webkit-order: 1; order: 1; }
ottenendo
SESTO QUINTO QUARTO TERZO SECONDO PRIMO
Fonte:
– Vertical reordering of blocks with CSS
– Swap DIV position with CSS only