How do I reverse the order of Divi's columns in the mobile version?

Published on 08/07/2021 | 13 comments

You've noticed it and it's annoying you... You'd like to reverse the direction of Divi's columns in the mobile version.

When you create a layout with text on the left and an image on the right and then vice versa in the next line, the mobile version is offset and your layout is not optimal.

If it's on your blog, it may go away, but if it's on your client's site, it won't take long for them to notice and ask you to fix it!

inverser colonnes divi
Inverting Divi columns in mobile version only

Good news, in this article, you will see that it is very simple to reverse the direction of the columns in mobile and tablet versions! Here we go!

Announcement: this article contains affiliate links that you will easily recognize. The classic links are in purple and sponsored links are in pink.

1 - Inverting Divi columns: video tutorial

For once, let's start by watching the video. This way you will see directly what you have to do to correct this problem and then we will go into the detailed explanations...

2 - The flexbox: an essential CSS property

As you have seen in the video, you can easily change the direction of the columns in Divi in mobile version, just with 2 or 3 lines of CSS!

This is possible thanks to the Flexbox, a project integrated into CSS3 in 2016.

With the property display:flexyou can do a lot of things! You can do anything in fact:

  • Change the direction with the flex-direction
  • Change the line crossing with flex-wrap
  • Change the horizontal alignment with justify-content
  • Change the vertical alignment with align-items and align-content
  • Change the order of child elements with order
  • etc.

In short, believe me, the flexbox is a lifesaver 🤣 ! And in the case of this article, it is flex-direction which allows us to change the direction of Divi's columns.

column reverse divi
Property: flex-direction - Value: column-reverse

To better understand how this works, please see the CSS Tricks article.

Did you know? You can test Divi for free by visiting on this page and clicking on "TRY IT FOR FREE

3 - Media queries: essential for responsive

The other essential element for changing the direction of Divi's columns on mobile is the use of media queries.

Indeed, you don't want to reverse the columns on the desktop versions, do you? What we want is for it to work only on small screen sizes!

So media queries are essential. It's also CSS, so it's nothing complicated to understand. If I learned it by myself when I was over 30, you can too 🤪.

Media queries allow you to create CSS rules based on screen size. This is the basis of responsive design.

In our case, here, we need to act on small screens, smaller than 980px. The rule used will therefore be @media screen and ( max-width: 980px ).

To fully understand how media queries work, please see the article published on AlsaCréation.

Need to master Divi? Discover my training which will guide you step by step in the understanding and use of Divi! Learn more about Divi training.

4 - Reverse the direction of Divi's columns in 3 clicks

As you have seen in the video, it is very easy, here are the steps:

snippet reverse column
Changing the direction of Divi's columns
  1. First, open the settings for the (green) row containing the columns to be inverted in the mobile version. Go to the Advanced tab and add a CSS class named reverse (this is an example, you can name it anything you like).
  2. Then go to the Divi tab > Theme Options > Customize CSS (there are several ways to do this). add code to Divi).
  3. You add the following code:
@media screen and ( max-width: 980px ) {
    .inverse {
        display: flex;
        flex-direction: column-reverse;
    }
}
  1. Save your changes.

That's it, nothing could be easier! Now your columns are displayed in the right order when you visit your site in mobile version.

Of course, as shown in the video, you will need to add the CSS reverse class to all the rows (in green) on your site that are causing a problem. Those that are in the right order in the mobile version do not need this class.

5 - In conclusion

So how about this easy-to-apply mini-tip?

By doing some research on the web, I found much more complicated tutorials to achieve the same result! For example, here are two of them:

What do you think?

inverser colonne mobile
inverser colonnes
reverse column

740 words

3

You should like it too:

Comment personnaliser le curseur de la souris sur votre site ?

How to customise the mouse cursor on your site?

Do you want a site that is customised down to the last detail? I have a quick and easy tutorial to help you customise the mouse cursor on your site. This way, when your visitors hover over a link, the cursor is fully customised!

13 Commentaires

  1. françoise

    Bravo!
    Comme d’habitude, clair, simple et efficace!

  2. Denis

    Super bien, je vais utiliser. En effet, combien de fois je me suis enquiquiné à faire de belles présentations sur Mac pour les retrouver sans queue ni tête sur portable et obligé de recomposer tout ce que j’avais fait pour que cela soit cohérent.
    Intéressant d’autant qu’aujourd’hui on ne peut pas se passer du visuel sur portable. Beaucoup de consultations de site commencent sur l’iPhone pour finir sur l’IPad ou le Mac.

  3. Lycia Diaz

    Merci Françoise

  4. Lycia Diaz

    Merci Denis. Oui tu as raison… moi pour mes blogs c’est surtout sur desktop que vient le trafic mais c’est normal car c’est ma thématique qui veut ça. Pour les autres thématiques, c’est clairement les versions mobiles qui s’imposent.

  5. Lucie

    Trop bien, merci !! 😀

  6. Gransart

    Bonjour Lycia, je voudrais te soumettre un petit problème auquel je suis confronté et pour lequel je ne trouve pas la solution idéale.
    Quand tu utilises le module témoignage dans Divi, celui-est relativement bien fait mais lorsque tu en as beaucoup, cela va vite occuper un espace visuel important, tu peux toujours les mettre sur quatre colonnes et cinq rangs, mais ça risque d’être pénible à l’écran surtout sur ton iPhone, une vraie litanie.
    Alors, je m’étais dit pourquoi ne pas essayer de faire ça sous mode carrousel, mais les plugins que j’ai testés ne sont pas terrible (wowcarousel -divi people par exemple) et au niveau du responsive c’est la cata.
    Aurais-tu une idée comment gérer le sujet ?
    Merci par avance de ta réponse

  7. Lycia Diaz

    Salut Gransart, non je n’ai pas trop de solution, il faut trouver un autre plugin, mais tu peux essayer des plugins pas obligatoirement conçus pour Divi, sur le répertoire de WordPress, tu en trouveras certainement un qui convient

  8. valerie M.

    J’adore !
    Lycia, tu es toujours au rendez-vous quand on a besoin de conseil !
    un grand merci pour ce tuto qui va m’être fort utile…

  9. Lycia Diaz

    Merci Valérie

  10. Valérie M.

    Bonjour Lycia, encore moi… ce tuto ne fonctionne pas sur les « sections spéciales » avec des colonnes différentes ?
    ou bien j’ai mal fait ? Merci de ton retour,
    Valérie

  11. Lycia Diaz

    J’ai pas essayé sur les sections spéciales, il est possible qu’elles fassent appel à des classes CSS différentes, il faut inspecter le code.

  12. Valérie M.

    Lycia,

    J’ai fait une demande à ET et voilà le css :

    @media (max-width: 980px){
    .et_pb_section_6.inverse.et_section_specialty .et_pb_row {
    display: flex;
    flex-direction: column-reverse
    }
    }

    ça peut servir à d’autres personnes aussi… je partage.
    A bientôt

  13. Lycia Diaz

    Merci Valérie

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Je souhaite recevoir les news du blog Astuces Divi !

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pin It on Pinterest

Shares
Share This