Sur ordinateur, les colonnes s’affichent correctement: le texte à gauche, l’image à droite. Ouvrez le site sur un téléphone, et l’image apparaît en premier tandis que l’explication glisse en dessous, sous la ligne de flottaison.

Cela vous semble familier? La raison est que sur les appareils mobiles, toute la mise en page se réduit à une seule colonne, et l’ordre des blocs reste fixe: ce qui vient en premier dans le HTML apparaît en haut. Personne n’a envie de modifier le HTML uniquement pour le mobile: cela impliquerait de dupliquer des sections ou d’utiliser des astuces peu élégantes avec display: none.

CSS propose un outil qui résout ce problème sans toucher au balisage: la propriété order combinée à flexbox. Une ligne dans une media query, et les blocs échangent leur place.

💡 Aperçu rapide:

• Comment flexbox contrôle l’ordre des blocs sans modifier le HTML
• Le code CSS pour inverser deux colonnes sur mobile
• Comment appliquer les classes via un constructeur de pages (avec King Composer en exemple)
• Un extrait prêt à l’emploi: copiez-le, remplacez par vos classes, testez-le

Comment fonctionne la propriété CSS order: l’essentiel

Flexbox ne se limite pas à aligner des éléments horizontalement et verticalement. Chaque élément flex possède une propriété numérique order qui détermine sa position visuelle indépendamment de sa place dans le HTML.

Par défaut, tous les éléments ont order: 0, ils apparaissent donc dans l’ordre où ils sont écrits dans le code. Mais dès que vous attribuez order: 1 à un bloc et order: 2 à un autre, le navigateur les réorganise. Le chiffre le plus bas passe toujours en premier.

L’aspect le plus utile: order fonctionne à l’intérieur d’une media query. Sur ordinateur, les blocs restent dans leur position normale, mais sur les écrans de moins de 768px de large, ils échangent leur place. Pendant ce temps, le HTML reste intact, les moteurs de recherche voient l’ordre d’origine et l’accessibilité n’est pas affectée. MDN le confirme: l’ordre visuel change, mais l’ordre de tabulation ne change pas (tant que vous ne touchez pas à tabindex).

Notez que order ne fonctionne qu’à l’intérieur d’un conteneur flex. Le bloc parent doit avoir display: flex ou display: inline-flex. Sans cela, la propriété order est ignorée.

Décomposition étape par étape: appliquer order en pratique

Prenons une section typique: deux colonnes sur une même ligne sur ordinateur, empilées sur mobile. L’objectif: sur téléphone, la deuxième colonne (image) doit apparaître EN PREMIER, et la première colonne (texte) doit venir en second.

Étape 1: préparer la structure HTML

Le balisage de base se compose d’un conteneur parent et de deux blocs enfants. L’ordre dans le HTML: le texte d’abord, puis l’image. C’est exactement la structure que génèrent la plupart des constructeurs de pages, y compris King Composer.

1
<div class="section-wrapper">
2
  <div class="block-text">Текст и пояснение слева</div>
3
  <div class="block-image">Картинка справа</div>
4
</div>

Étape 2: écrire le CSS

Tout d’abord, faites du conteneur un conteneur flex pour toutes les résolutions. Ensuite, dans la media query pour le mobile, attribuez à chaque bloc son propre order et étirez-les en pleine largeur.

Ajoutez ce code dans Tableau de bord → Apparence → Personnaliser → CSS additionnel de votre thème ou via l’extension Code Snippets. Ne modifiez pas directement les fichiers du thème, car vos styles seraient perdus lors d’une mise à jour.

1
.section-wrapper {
2
    display: flex;
3
    flex-flow: wrap;
4
}
5
 
6
@media screen and (max-width: 767px) {
7
    .block-image {
8
        order: 1;
9
        width: 100%;
10
    }
11
 
12
    .block-text {
13
        order: 2;
14
        width: 100%;
15
    }
16
}

Analyse: sur ordinateur, les deux blocs sont des éléments flex standards avec order: 0 (la valeur par défaut selon la spécification). Texte à gauche, image à droite, comme dans le HTML. Sur les écrans de moins de 768px de large, la media query s’active: .block-image reçoit order: 1, ce qui le place en premier; .block-text reçoit order: 2, ce qui le place en second. width: 100% garantit que les blocs occupent toute la largeur de l’écran.

Point clé: les classes .block-text et .block-image sont votre propre nommage. Dans un projet réel, vous ciblerez les classes générées par votre constructeur de pages ou votre thème.

Étape 3: comment attribuer des classes dans un constructeur de pages

Approche universelle: tout constructeur visuel (Elementor, Bricks, l’ancien King Composer, Gutenberg natif via un groupe) vous permet d’ajouter une classe CSS personnalisée aux sections et aux colonnes. Les captures d’écran ci-dessous montrent la procédure dans l’interface de King Composer, mais la logique est la même partout: trouvez le champ «Classe CSS» ou «Classe supplémentaire» dans les paramètres de la ligne ou de la colonne et saisissez le nom souhaité.

Une section à deux colonnes dans King Composer ressemble à ceci:

Attribuez la classe section-wrapper au conteneur parent (la ligne):

Attribuez la classe block-text à la colonne de gauche:

Attribuez la classe block-image à la colonne de droite:

Après avoir enregistré et publié, vérifiez la page sur un téléphone ou via les Outils de développement du navigateur (F12 → Activer la barre d’outils de l’appareil). Les blocs devraient échanger leur place: image en haut, texte en dessous.

Comment adapter cette méthode à votre projet

Trois scénarios typiques et ce qu’il faut modifier dans le code:

Vous utilisez un autre constructeur de pages. Trouvez le champ de classe CSS personnalisée dans les paramètres de la section ou de la colonne. Dans Elementor, c’est Avancé → Classes CSS; dans Bricks, c’est Paramètres → ID CSS et classes. Saisissez vos noms de classe et mettez à jour les sélecteurs CSS en conséquence.

Vous codez à la main sans constructeur de pages. Encore plus simple: écrivez les classes nécessaires directement dans le balisage HTML de votre template. Le code CSS reste le même; adaptez simplement les sélecteurs à votre balisage.

Vous avez trois blocs ou plus au lieu de deux. Ajoutez une règle pour chaque bloc dans la media query avec sa propre valeur order. Par exemple: .block-a { order: 1; }, .block-b { order: 2; } et .block-c { order: 3; }. Les chiffres n’ont pas besoin d’être consécutifs; vous pouvez utiliser order: 10 pour garantir qu’un élément soit déplacé à la fin.

Assurez-vous que le conteneur parent a display: flex; sans cela, order est ignoré silencieusement, et vous perdrez une demi-heure à déboguer. Le scénario le plus courant: le conteneur a par défaut display: block, flex est appliqué mais écrasé par une règle de thème plus spécifique. Outils de développement → Onglet Calculé vous montrera la valeur finale.

Regardez cette courte vidéo sur le sujet, qui montre clairement comment order réorganise les blocs en temps réel:

⁉️🤔 Foire aux questions

Est-ce que order fonctionne dans tous les navigateurs?

order est pris en charge par tous les navigateurs modernes depuis 2015, y compris Safari sur iOS et Chrome sur Android. Selon les données de caniuse.com, la prise en charge globale de flexbox est de 99,2%. Si vous avez besoin de la compatibilité avec IE11 (qui comprend flexbox mais présente des bugs), ajoutez -ms-flex-order avec la même valeur.

Est-ce que order perturbe l’indexation par les moteurs de recherche?

Non. Les robots des moteurs de recherche lisent le code source HTML de la page, et order ne modifie que l’ordre visuel dans le navigateur. Google le confirme: les réorganisations CSS n’affectent pas le classement. L’ordre du contenu d’origine dans le HTML reste inchangé.

Pourquoi mon order ne fonctionne-t-il pas?

Trois raisons les plus courantes: (1) le bloc parent n’est pas en display: flex; (2) la media query est écrasée par une règle de thème plus spécifique; (3) l’élément enfant a une valeur de display autre que block (comme inline). Il devient tout de même un élément flex, mais le comportement peut différer. Ouvrez les Outils de développement, onglet Éléments → Calculé: vérifiez si votre order est appliqué et non barré.

Puis-je changer l’ordre en utilisant CSS Grid au lieu de flexbox?

Oui. Grid possède une propriété order qui fonctionne de manière identique. De plus, Grid offre une alternative: vous pouvez définir grid-row et grid-column pour un positionnement explicite des éléments sans order. Mais si vous avez simplement une ligne de deux colonnes, flexbox est plus simple (moins de code).

Que faire si mon constructeur de pages ne permet pas d’ajouter une classe personnalisée?

Certains constructeurs anciens ou allégés n’affichent pas le champ Classe CSS. Dans ce cas: (1) enveloppez la section dans un groupe et attribuez la classe au groupe; (2) utilisez le sélecteur CSS intégré du constructeur (par exemple, .kc-column-12a3b pour King Composer), que vous pouvez trouver via les Outils de développement; (3) passez à Gutenberg avec un conteneur de groupe, où chaque bloc dispose d’un champ «Classe CSS additionnelle» dans le panneau de droite.

Points clés à retenir sur l’inversion de l’ordre des blocs

La propriété CSS order est le moyen le plus simple de contrôler la séquence visuelle des blocs sans modifier le HTML. La flexibilité s’obtient avec trois lignes dans une media query: définissez display: flex sur le conteneur, attribuez order: 1 et order: 2 aux blocs enfants au point de rupture mobile, et le tour est joué.

La voie de mise en œuvre la plus sûre: ajoutez le CSS via Apparence → Personnaliser → CSS additionnel ou l’extension Code Snippets; ne touchez pas aux fichiers du thème. Avant de publier, testez la page via les Outils de développement sur un émulateur iPhone et sur un appareil réel. Si order ne fonctionne pas, vérifiez d’abord la valeur calculée de display du conteneur.

Avez-vous essayé cette méthode sur votre site? Partagez dans les commentaires quel constructeur de pages vous avez utilisé et ce que vous avez inversé.