Par défaut, Divi conserve l’ordre des colonnes tel qu’il est défini sur desktop. Sur mobile, il peut être utile d’inverser cet ordre, par exemple pour afficher le texte avant l’image.
Contenu avancé #
Cet article utilise du code CSS. Une mauvaise manipulation peut impacter l’affichage responsive de votre site.
Objectif #
Inverser l’ordre des colonnes sur mobile dans une ligne Divi, par exemple pour afficher le texte avant l’image.
Code CSS à utiliser #
Dans la ligne Divi concernée, ouvre l’onglet Avancé, puis ajoute le code suivant dans le CSS personnalisé de l’élément principal :
display: flex;
flex-direction: column-reverse;
Où ajouter ce code #
- Dans les paramètres de la ligne
- Onglet Avancé
- Zone CSS personnalisé → Élément principal
Comprendre le fonctionnement #
- display: flex; active l’affichage en mode Flexbox
- flex-direction: column-reverse; inverse l’ordre vertical des éléments
Sur mobile, cela permet par exemple d’afficher le texte avant l’image, même si l’ordre est inverse sur desktop.
Cas d’utilisation #
- Afficher un texte avant une image sur mobile
- Améliorer la lecture sur petits écrans
- Adapter l’ordre visuel sans modifier la structure desktop
Points d’attention #
- Cette méthode modifie l’ordre visuel, pas le contenu lui-même
- Elle doit être testée sur mobile pour vérifier le rendu final
- Selon la structure de la ligne, un ajustement complémentaire peut être nécessaire
Astuce utile #
Utilise cette méthode lorsque le contenu est plus lisible ou plus logique dans un ordre différent sur mobile que sur desktop.
Compatibilité #
Cette solution fonctionne avec les lignes Divi classiques. Sur des mises en page plus complexes ou avec des personnalisations avancées, il peut être nécessaire d’adapter la règle CSS.
Pour conclure #
Inverser l’ordre des colonnes sur mobile permet d’améliorer la lisibilité et la hiérarchie du contenu sans modifier la structure de la page sur desktop.