CSS: modificare l'ordine delle colonne in una griglia Flexbox

CSS: modificare l'ordine delle colonne in una griglia Flexbox

I CSS ci permettono di modificare l'ordine di visualizzazione di una griglia in Flexbox.

La soluzione consiste nell'usare la proprietà order. Nell'esempio che segue il primo box della riga comparirà per secondo, il secondo per terzo e il terzo per primo.


.row {
    display: flex;
    flex-wrap: wrap;
}

.col {
    width: 33%;
}

.col:nth-child(1) {
    order: 2;
}

.col:nth-child(2) {
    order: 3;
}
.col:nth-child(3) {
    order: 1;
}

Torna su