Divi : ordre des colonnes sur mobile. Lorsqu’on crée le design d’un site Web, avec Divi ou autre, on peut être amené à créer des alternances, pour créer du rythme, par exemple :

• Rangée 1, colonne 1 : texte, colonne 2 : image
• Rangée 2, colonne 1 : image, colonne 2 : texte
• Rangée 3, colonne 1 : texte, colonne 2 : image
• Rangée 4, colonne 1 : image, colonne 2 : texte

C’est sympa sur grand écran, mais sur mobile les colonnes disparaissent, chaque colonne passe en pleine largeur, elles passent les unes en-dessous des autres :

Dans ce tutoriel, nous allons voir comment garder cette alternance de colonnes sur grand écran, et la supprimer sur mobile.

Exemple Divi réel : contenu en alternance, en quinconce

Ce que nous avons sur grand écran (desktop) : du contenu en quinconce

Le rendu sur mobile de nos colonnes Divi – en vue téléphone, les colonnes disparaissent, elles passent toutes les unes en-dessous des autres :

Le problème : l’alternance texte/image, image/texte, texte/image, donne un bon effet sur grand écran, mais apporte de la confusion sur mobile.

Nous voudrions avoir :

• Grand écran : texte/image, image/texte, texte/image
• Mobile : image/texte, image/texte, image/texte

Pour ce faire, nous allons utiliser du CSS flexbox avec Divi.

CSS Flexbox Divi pour changer l’ordre des colonnes sur mobile

Ajoutez ce CSS à votre site dans votre thème enfant ou dans Divi > Personnaliseur de thèmes > CSS additionnel

/* ordre colonnes sur mobile */
@media all and (max-width: 980px) {
   /* envelopper la rangée dans une flexbox */
   .custom_row {
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-flex-wrap: wrap; /* Safari 6.1+ */
      flex-wrap: wrap;
   }
   /* classes personnalisées qui désigneront l'ordre
   des colonnes dans la ligne de la flexbox */
   .first-on-mobile {
      -webkit-order: 1;
      order: 1;
   }
   .second-on-mobile {
      -webkit-order: 2;
      order: 2;
   }
   .third-on-mobile {
      -webkit-order: 3;
      order: 3;
   }
   .fourth-on-mobile {
      -webkit-order: 4;
      order: 4;
   }
   /* ajoute une marge à la dernière colonne */
   .custom_row:last-child .et_pb_column:last-child {
      margin-bottom: 30px;
   }
}

Ensuite, appliquez les classes CSS suivantes dans les réglages de la rangée. Pour ajouter une classe à une section, rangée ou module Divi, cliquez sur la roue dentée de l’élément :

Dans l’onglet « Avancé », vous trouverez le champ « Classe CSS » de votre rangée, et dans l’onglet contenu, vos colonnes :

• First on mobile (class « first-on-mobile ») signifie : afficher en premier sur mobile
• Second on mobile (class « second-on-mobile ») signifie : afficher en deuxième sur mobile
• Third on mobile (class « third-on-mobile ») signifie : afficher en troisième sur mobile
• Fourth on mobile (class « fourth-on-mobile ») signifie : afficher en quatrième sur mobile

Sauvegardez la page Divi, quittez le Visual Builder, et voici le résultat :

L’alternance des contenus a bien été supprimée sur affichage mobile, mais reste sur grand écran.

Si cela vous a aidé, ou si vous n’avez pas réussi, laissez un commentaire ci-dessous avec un remerciement ou une question.

Formation : "Découvrir Divi"

Cette première formation est une bonne introduction à Divi : elle vous permettra de comprendre comment créer et mettre en page des pages sur votre site Internet.

Voir la formation

Formation : "Divi intégration Web"

Création d'une page Web complexe à partir d'une maquette graphique : l'intégration Web avec Divi et WordPress n'aura plus de secrets pour vous !

Voir la formation

Acheter son hébergement Web

Apprenez à mettre en place un hébergement Web et commencez à travailler sur votre site aujourd’hui. Je vous montre toutes les étapes en détails.

Voir la formation