Can You Re-Order Divi Columns On Mobile? Yes! It’s Very Easy!
In the last tutorial, we learned how easy it is to resize Divi columns. The next logical tutorial now is how to change the stacking order of Div columns on tablet and mobile. The two tutorials combined create an amazingly simple system that no one else has achieved. So I’m excited about this, and know it is going to be super helpful to so many people.
▶️ Please watch the video above to get all the exciting details! 👆
FYI: Do It With Divi Responsive Helper!
Why work so hard? You can do this easily with a setting in our Divi Responsive Helper plugin!
Change Divi Colum Mobile Stacking Order
Here’s a quick visual Of What We Want To Do
I set up a quick demo with a row with two columns, the one on the left with a Text Module and the one on the right with an Image Module. By default, Divi will stack these from left to right, so on mobile, the Text Module would be on top and the Image Module on the bottom.
Divi does not have this feature…so will this take a tone of coding?
You will need some CSS, but don’t be too scared. We are not going to add a bunch of confusing CSS classes and long code snippets like Elegant Themes did in their tutorial…instead, we are going to literally solve this missing Divi feature with a few words of code right in the Divi builder!
How To Control Divi Column Stacking Order on Mobile
Step #1. Add 2 Lines of CSS to Your Row Settings
The first to do is to add some CSS to the Divi row settings. This CSS is needed to tell the columns inside the row to display with flex, with a type of CSS. Once this simple step is completed, you will already be half way to controlling your Divi column stacking order on mobile.
Go to the Row Settings>Advanced Tab>Custom CSS toggle. Paste the following snippet of CSS there in the Main Element.
display: flex;
flex-wrap: wrap;
Manually Set The Divi Column Stacking Order
Step #2. Tell Each Column Which Order Number They Are
If you thought step #1 was easy, you are in luck. The last step is even easier, and a bit more fun as well.
Inside the row settings you will see a list of your columns. Click on the settings icon and got the column’s Advanced Tab>Custom CSS toggle.
For each column, you need to decide which order you want them to stack on mobile. All you have to do is add the words “order: 1;” and “order: 2” etc. to the columns. Write or paste those simple words in the Main Element.
order: 1;
You can do this for as many columns as you want, 2, 3, 4, 5, or 6.
And that’s pretty much it! Here’s how example Divi columns stack now that we are finished. The column that was on the left on desktop, the text, is now on the right. The column that was on the right on desktop, the image, is now on the top.
Do It With A Setting!
Make life easier and use the Divi Responsive Helper instead, the ultimate Divi responsive toolkit with awesome features and settings to help make your website look and work great on all devices!
Nelson!!! This is life-changing! I’ve been duplicating rows/modules and shifting things around to optimize for mobile FOR SO LONG. I always thought “I wish there was a code to just tell the columns to display in reverse order”. Figured I’d give it a quick Google, and low and behold our man Nelson has the answer! You’re a godsend – thank you!!
Hello,
How do I reorder the columns if I use the special orange section in DIVI? In the left column I have the row used (green) and in it the module for the image and in the right column I have only the modules for the text. On mobile I would need to display the text first and the image below it. How to do this using the special orange section. Thank you.
I have Divi Responsive Helper and unfortunately I can’t find any option for this there either.
Thank you very much – elegant and very quick solution!
You’re welcome, glad you like it!