Code by Day | Explore By Weekend

How To Manually Control Divi Column Stacking Order on Mobile Tutorial by Pee Aye Creative

How To Control Divi Column Stacking Order On Mobile

I'm going to show you how to easily control and manually set Divi column stacking order, which is especially needed for tablet and mobile devices.
Divi Responsive Helper Plugin by Pee-Aye Creative
Control Divi column stacking order on mobile

Divi does not have this featuer…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! 

display: flex;
flex-wrap: wrap;
add css to the row settings to adjust the Divi mobile column stacking order
order: 1;
Edit the row settings to adjust the Divi mobile column stacking order
add css to the column settings to adjust the Divi mobile column stacking order
divi column stacking order on desktop
divi column stacking order on phone

Don’t forget to check out our Divi Responsive Helper plugin that has this column stacking feature built into it already!

35
Last updated Jan 3, 2021 @ 1:11 pm

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.
Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Recent Posts

Leave A Response!

Subscribe
Notify of
guest
37 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Maksym
Maksym
1 year ago

Great tutorial, works like a charm! Thank you 🙂

Kathy
11 months ago

Hi Nelson,
Love your snippets, they’ve been super helpful! I just tried this one, and I must have missed something, as it flipped on desktop! Do I need an @media{} on the first part?

Kathy
Reply to  Kathy
11 months ago

Never mind, I didn’t click the mobile icon first! Perfect!!! Thanks Nelson! Great stuff!

Jazzodrome
Jazzodrome
10 months ago

Wonderful !

Un mot pour les francophones comme moi : Bravo ça marche super !

Francois
Francois
10 months ago

Hi There

I just could not get to work on my site. I then insert a new section with two modules and did everything as recommended but still didn’t work.

I then followed the Divi link below and all worked fine:
https://www.elegantthemes.com/blog/divi-resources/how-to-change-divis-column-stacking-order-on-mobile-devices

snake
snake
9 months ago

I can;t seem to get this to work, it simply isn’t changing the stacking order. Any idea why?
Yes I am definitely putting the CSS in the right place.

nemsy
nemsy
8 months ago

incredible

Tracey Munn
8 months ago

Brilliant!!! Not sure if it’s just me but can’t see the date of the post but still working a treat in April 2020!

Bautista de Lusarreta
8 months ago

Is there something else I need?
I can’t make it work.

Adam Flikkema
7 months ago

Love the tutorial! It was working great then it suddenly stopped. Was there an update that might have broken it?

Dave
7 months ago

Thanks for creating this tutorial. I’ve run into this problem on my last two websites and you helped me solve it. Thanks so much.

Aiman
Aiman
6 months ago

Super awesome tutorials. Using flex layout techniques is super easy. Thanks for the tips.

Snake
6 months ago

Is there any way to get this to work inside the builder as well? As currently I have to exit the builder to test it.

snake
snake
5 months ago

a few issues I have noticed with this method. Unless you explicitly enable the screens size option and add the custom css to MOBILE ONLY, it doesn’t work. If you just add it to custom CSS in general, it does nothing. I also have to add it to EVERY ROW, even though I only need it on alternate rows. So as most people do, I alternate the image and text column on each row. Row 1 image left, text right Row 2 text left image right So technically I only need to change the stacking order on the even rows… Read more »

kevin
kevin
4 months ago

Hi Nelson – thanks for all your amazing tutorials Should this code work or tablet as well as mobile if i change the orfer in both I just can’t seem to get it to work at all – its the first one of yur snippets I’ve had a brain freeze about with the code i assumed anything that was specified as column 1 would be on the left desktop and top tablet and mobile and anything specified column 2 would be on the right on desktop and below on tablet and mobile BASICALLY I a layout lat alternates pic left… Read more »

Russ
4 months ago

Don;t you just need to enable “equalise column heights” on the row to enable flex?

John
John
3 months ago

Fix works, then after save doesn’t stick. ???

John Warnock
John Warnock

The code is there in the right places even after edit, yet it won’t stack in the order I told it to. Two columns in a row in a section.
Left column order2, right order1. Since adding this code it also messed up the viewport display on mobile and wants to horizontally scroll for the right column.
Here is the page.
https://www.uhsm.com/health-share-programs/

John Warnock
John Warnock
Reply to  John Warnock
3 months ago

Argh, it’s working now. horizontally scroll may be something else

Jack Lav
Jack Lav
1 month ago

This works perfectly. HOWEVER, I spent a good 10 minutes messing around with it NOT working. The key thing to know is that it won’t show in the order you want IN THE VISUAL BUILDER. You have to exit and then it displays in the order you want.

Amr - The Internet Guy
15 days ago

Thanks a million.
I love the simplicity of this solution! No need for CSS classes or plugins.

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Divi Tutorials On YouTube

Join over 4,700 others and subscribe to our helpful Divi videos!

Visit Our Channel

Pin It on Pinterest

0

Your Cart