Cambia ordine

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

Condividi questo articolo

Condividi su facebook
Condividi su twitter
Condividi su linkedin