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 2.0 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!

Divi Responsive Helper Plugin 2.0 by Pee Aye Creative
Last updated Mar 9, 2021 @ 12:10 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

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy


  1. Maksym

    Great tutorial, works like a charm! Thank you 🙂

  2. Kathy

    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

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

  3. Jazzodrome

    Wonderful !

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

  4. snake

    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.

  5. nemsy


  6. Tracey Munn

    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!

    • Nelson Lee Miller (aka The Divi Teacher)

      Thanks Tracey, yes I choose not to show the date because some people think if this said 2019 that is would be outdated. I keep all of my tutorials up to date 🙂

  7. Adam Flikkema

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

      • Brent

        I’ll bet most people who said it doesn’t work are still in visual builder…
        This would be a great note to add to the tutorial.

        Great job, and Thanks!

  8. Dave

    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.

  9. Aiman

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

  10. Snake

    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.

  11. snake

    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 numbers to make the image always be first on mobile, since it is already correct on odd rows (1,3,5 etc).

    However, if I do this, it it always applies the settings from the previous row. So my stacking order from row 1 will also be applied to row 2, so I have to add the CSS there as well.

    • Nelson Lee Miller (aka The Divi Teacher)

      Correct, you need adjust this on Tablet and/or Phone, so that is not an issue. What you mentioned about odd and even rows is an issue but not with Divi, must be something weird going on with your site.

  12. kevin

    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 – text right and pic right text left as you go down the page .. but i always want the pic at the top and the text underneath on tablet and mobile>>

    this seemed like the dream solution but I can’t seem to make it work – I’m sure its me not you 😉

    Thanks in advance

    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Kenin,
      The way Divi usually works is the larger devices carries over to the smaller. You should be able to change the order as you want for Desktop, Tablet, and Phone.

  13. Russ

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

  14. John

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

      • 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.

      • John Warnock

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

  15. Jack Lav

    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.

  16. Amr - The Internet Guy

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

  17. Rafael

    Awesome! How can i make it work on a specialty section?

  18. Emily

    thank you SO much for this simple hack!!

  19. Bernardo João Pando da Silva

    Great post!

  20. John

    Stacked nicely on mobile thought still needs tweaking. But on a desktop the CSS extended the borders around my short left column downward to match the long main column to its right — 3/4 empty space inside the borders down to the bottom of the page. Any solution? Link below: A simple newsletter site at the early stage of construction.

      • John

        Got it. Thanks! Another question. I am experimenting with changing my layout to a specialty section with a left sidebar. And I tried different combinations, but can’t seem to make this CSS trick apply. Suggestion?

  21. Sergio

    Hi Nelson, Thank you very much. It works perfectly for me.

    Can/should I save this customization of the CSS in the child theme? If so, how should I proceed in this case? 
    I’m afraid that with a Divi update everything will be deleted.

    Thank you very much for the great website and for your excellent support.
    You are for me one of the Best-Support on the web;-).

    I have learned so many things about Divi and CSS from you.

      • sergio

        Thank you so much Nelson!

        I know this is not the right topic here, but how can I hide the premade layouts for the clients registered as Editor. I mean only the premade layout.

        I would be very grateful for your support.

  22. James

    Total gamechanger. Thanks!

  23. Janita

    THIS WAS AWESOME!!!!!!!!!!!!! It worked perfectly and took me about 5 minutes and I do NOT do code! Thank you times a million for fixing my mobile view!

  24. Drew Spinoso

    Exxxxcellent! I even tried another option first and it was a catastrophe. You never disappoint, Nelson!


Submit a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

Pin It on Pinterest


Your Cart