CSS Éléments de la grille - Ordre


Définir l'ordre visuel des éléments de la grille

La propriété CSS order peut être utilisée pour définir l'ordre visuel des éléments de la grille.

Le premier élément de la grille dans le code source HTML n'a pas besoin d'apparaître comme le premier élément dans le conteneur de la grille.

Exemple

Définir l'ordre visuel des éléments de la grille :

.item1 {order: 3;}
.item2 {order: 6;}
.item3 {order: 1;}
.item4 {order: 2;}
.item5 {order: 4;}
.item6 {order: 5;}

Résultat :

1
2
3
4
5
6

Essayez-le vous-même »

Remarque sur l'accessibilité : La propriété order permet un réagencement visuel, mais elle ne modifie pas l'ordre logique des éléments dans le DOM. Cela peut affecter les utilisateurs naviguant sur le site avec des technologies d'assistance, comme les lecteurs d'écran, car le contenu sera lu dans un ordre différent de celui dans lequel il est présenté visuellement.