Guida completa per cambiare la posizione a qualsiasi elemento

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