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 :

Alternance contenu Divi colonnes inversées mobile

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

colonnes en quinconce divi

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 :

Divi réglages rangée

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

Divi paramètres colonnes rangée
  • 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 :

Changer ordre affichage colonne Divi mobile

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-1-decouvrir-divi

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.

formation2-integration-web-wordpress

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 !

guide-hebergement-wordpress-2019-couv

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.

Obtenez ma formation Divi gratuitement

Recevez ma formation Divi gratuite avec des astuces pour vous simplifier le quotidien.

Vous allez recevoir un email à l'adresse que vous avez indiqué.