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!
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 recognise. 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:flexproperty, you 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.
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:
- 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).
- Then go to the Divi tab > Theme Options > Customize CSS (there are several ways to do this). add code to Divi).
- You add the following code:
@media screen and ( max-width: 980px ) {
.inverse {
display: flex;
flex-direction: column-reverse;
}
}- 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) of your site that are causing a problem. The ones 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:
- How to adjust Divi's column order on mobile devices
- How to control the stacking order of Divi columns on mobile
What do you think?
Bravo!
Comme d’habitude, clair, simple et efficace!
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.
Merci Françoise
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.
Trop bien, merci !! 😀
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
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
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…
Merci Valérie
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
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.
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
Merci Valérie
Très bon tuto qui me sauve lol. A noter que l’affichage responsive mobile sous l’éditeur Divi n’inverse rien, mais si vous le faites depuis la page de votre site avec la console de développeur (F12), cela s’affiche parfaitement.
Oui François, l’affichage mobile ne sert qu’à observer et non à paramétrer
Merci infiniment Lycia !!!
De rien 😉
Bonjour j’aurais aimé savoir à tout hasard si vous sauriez comment inverser des colonnes d’une section spéciale de Divi ?
Bonne question, j’ai pas essayé, il faut certainement changer la classe CSS