You noticed it, and it pisses you off... You'd like to reverse the direction of the columns of Divi in mobile version.
Indeed, when you create a layout with text on the left and an image on the right then vice versa in the next line, the mobile version is shifted and your layout is not optimal.
If it's on your blog, it may pass, but if it's on your client's website, it won't take him long to see it and ask you to correct it!
Good news, in this article you will see that it is very simple invert column direction in mobile and tablet version Hey! Here we go!
1 – Reverse Divi Columns: Video tutorial
Once it is not customary, let's start by watching the video. Thus, you will see directly what you need to do to correct this problem and then we move on to the detailed explanations...
2 - The flexbox: essential CSS property
As you saw in the video, we can easily modify the direction of the Divi columns in mobile version, simply thanks to 2 or 3 lines of CSS !
This is possible thanks to the Flexbox, a project integrated with CSS3 in 2016.
With the property display:flexWe can do a lot of things! We can do anything in fact:
- Change direction with property flex direction
- Change the switch to the line with flex-wrap
- Change horizontal alignment with justify-content
- Change vertical alignment with align-items and align-content
- Change the order of the child elements with order
- etc.
Anyway, believe me, flexbox saves lives! And in the case of this article, it is flex direction which allows us to change the direction of Divi columns.
To better understand how this works, do not hesitate to consult The CSS Tricks article.
Did you know that? You can test Divi for free by visiting on this page and by clicking on "TRY IT FOR FREE"
3 – Les media queries : indispensables pour le responsive
Other essential element for modify the direction of Divi columns on mobile is the use of media queries.
Indeed, you do not want to reverse columns on desktop versions, right? What we want is that it only acts on small screen sizes!
So the media queries are indispensable. It's also CSS, so nothing complicated to understand. If I learned it by myself at more than 30 brooms, you can also learn it. 🤪.
The media queries allow to create CSS rules depending on the size of the screens. It's the base of responsive design.
In our case, here we need to act on small screens, less than 980px. The rule used will therefore be @media screen and ( max-width: 980px ).
To understand how media queries work, do not hesitate to consult The article published on AlsaCreation.
Need to master Divi? Discover my training that accompanies you step by step in the understanding and use of Divi! Learn more about Divi training.
4 - Reverse Divi columns in 3 clicks
As you saw in the video, it's very easy, here are the steps:
- First, open the settings of the (green) line that contains the columns to be reversed in a mobile version. Go to tab Advanced and add a CSS class named reverse (This is an example, you can name it as you wish).
- Then you go to the tab Divi > Theme Options > Customize CSS (there are several ways add code in Divi).
- You add the following code:
@media screen and ( max-width: 980px ) {
.inverse {
display: flex;
flex-direction: column-reverse;
}
}- Save your changes.
There, nothing simpler! Now your columns display the right order when you visit your site in a mobile version.
Of course, as indicated in the video, you will have to add the CSS class reverse in all rows (green) of your site that pose a problem. Those in the right order in mobile version do not need this class.
5 - In conclusion
So what do you say about this easy-to-apply mini-tips?
By doing some research on the web, I found much more complicated tutorials to finally achieve the same result! For example, here are two:
- How to adjust the order of Divi columns on mobile devices
- How to control the stacking order of Divi columns on mobile
What do you think?
19 Comments