Contactez-nous Menu ⏵

Changer l'odre d'affichage d'une colonne Divi sur mobile ou tablette

Bénéficiez d'une solution simple et rapide pour ré-ordonner vos colonnes grâce à l'outil CSS Flex. Aucune connaissance CSS requise !

Article ordre colonne divi

Contrôler l'ordre des colonnes

Rendez-vous dans l'édition de votre page, trouvez les deux colonnes que vous souahitez modifier.

Ces deux colonnes doivent être dans la même ligne (row en anglais).

Ligne Divi

Cliquez sur la roue crantée sur la barre verte de la ligne pour ouvrir les paramètres.

paramètre de ligne divi

Ajoutez du CSS personnalisé

Allez dans la partie "Avancé" (advanced), puis trouvez l'onglet "Personnaliser CSS" (custom css), et collez le code suivant sous la ligne "Élement principal" (main element).

display: flex;
flex-wrap: wrap;

Modifiez la colonne qui passe avant

Une fois ce code enregistré, vous pouvez choisir l'odre de vos colonnes en modifiant à nouveau les paramètres de la ligne (row ).

  1. Ouvrez les paramètres de la première colonne dont vous souhaitez modifier l'ordre
Paramètre colonne Divi
Ajout ordering colonne Divi
  1. Allez dans les paramètres avancés
  2. Trouvez l'onglet "Personnaliser CSS" (custom css)
  3. Activez la sélection responsive en survolant cette partie.
  4. Cette option vous laisse ajouter une règle particulière sur l'appareil de votre choix (PC, tablette ou mobile).
    Dans cette exemple, nous choisissons de modifier l'odre de la colonne sur tablette.
  5. Ajoutez le code suivant.
    6. order: 1;

Modifiez la colonne qui passe après

La position 1 détermine que cette colonne apparaîtra en première sur tablette.

Faites de même pour la colonne qui sera affiché en seconde position.

order: 2;

Enregistrez et testez !

Ordre colonne 2

Si vous disposez de plusieurs colonnes, gérez l'ordre
de chacune comme vous le souhaitez en allant de order 1 à 6

Besoin d'une formation pour utiliser votre site ?