---
title: "[CSS] Inverser l’ordre des colonnes sur mobile dans Divi"
description: "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…"
url: "https://academy.drgeek.com/docs/avance/divi-code/css-inverser-lordre-des-colonnes-sur-mobile-dans-divi/"
updated: "2026-03-19"
category: Avancé / Divi (code)
tags:
  - Avancé
---

# [CSS] Inverser l’ordre des colonnes sur mobile dans Divi

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.