How To Manually Set Divi Column Stacking Order on Mobile [Super Easy]

Can You Re-Order Divi Columns On Mobile? Yes! It's Very Easy!
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.
Be sure to visit our written tutorial on our blog at bit.ly/divi-mobile-columns
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!
Join our Facebook group! / thediviteacher
Visit our Divi child themes, plugins, tutorials, and courses here: www.peeayecreative.com/

[@cheeseybud]

I cannot tell you how many times i come back to your tutorials when i need help. you're a star Nelson. Thank you!

[@PeeAyeCreative]

Happy to help! I'm so glad you enjoy the resources.

[@nestoraceves8904]

@@PeeAyeCreative Ditto! Thank you Nelson!

[@uxteamdrive7817]

Dude. honestly. You saved my day! So amazing after 1 hour of searching i´ve found your tutorial. all other tutorials on the planet are not for divi 4.0. Man thank you!

[@PeeAyeCreative]

You're welcome! I believe I am the only one doing tutorials anymore, especially with the header and menu, I think I have the market cornered on this with 15 and counting :)

[@johnpcusick]

Thank you saved me at 03:22 am on a Sunday trying to sort this

[@PeeAyeCreative]

That's great, John! I'm glad this helped you out in those morning hours :)

[@eq091801]

Excellent. Your tutorials are always gold. Thanks again.

[@PeeAyeCreative]

Glad you like them!

[@porcelina_zero]

Thank you for this simple tutorial! I needed to do exactly this at work today and had no idea how to accomplish this in Divi. This made it so easy. Thanks!! Subscribed to your channel, I see lots of stuff I want to check out.

[@PeeAyeCreative]

You're welcome Amanda! So glad you found our channel! Enjoy!

[@guismo72]

I just applied it to my website and it works perfectly fine 👌🏻 Thank you so much!

[@PeeAyeCreative]

Hi Solvei, that's so good to hear!

[@chelseabirchall6693]

Thank you so much for this tutorial! You're a great instructor!

[@PeeAyeCreative]

You're welcome, I'm so glad you like it!

[@lorenzlucin9938]

This is what i need. This is more easier to use more than other tutorial video.

[@PeeAyeCreative]

Yes, I think the other ones involve quite a lot of CSS. :)

[@Cvtap_Pros]

This is an amazing tutorial! Thank you so much! I'm subscribing right now!

[@PeeAyeCreative]

Awesome, thank you!

[@mariafranceschini175]

omg! thank you!! 2 days figuring out how to do this !!

[@petrmikulasek3822]

Awesome tutorials!! Thanks! This one and the previous tutorial helped me a lot.

[@PeeAyeCreative]

Thank you! I'm so glad they are helpful, I know those two are some of my favorites!

[@FinanceFellows]

Thank you so much. Again a very helpful tutorial. Saved me a lot of time!

[@PeeAyeCreative]

Great to hear!

[@veronicag.805]

Thank you!!! so much easier than other stuff I found.

[@PeeAyeCreative]

Glad it helped! Yes this is much easier than the other ones about this. :)

[@roman__saavedra]

Awesome! It was super easy, thanks for your tips! You got a new follower

[@PeeAyeCreative]

I'm so glad it was easy! Let me know if you ever have ideas for tutorials!

[@verbanet]

You are the best, that is clear. Huge thanks!

[@PeeAyeCreative]

Happy to help!

You are my new hero, thanks!

[@PeeAyeCreative]

Happy to be!

[@jeffersonpaulino8473]

I'm from Brazil and I was looking for that. Thanks

[@PeeAyeCreative]

You're welcome, I'm glad you found it!

[@therankingworld7627]

PEE-AYE. I. LOVE. YOU!!!

[@PeeAyeCreative]

😊

[@md.imranhossain2769]

Thank you, Boss, It's a very very helpful video!

[@PeeAyeCreative]

You are most welcome, I'm so glad you found it helpful!

[@dannybribiesca]

Honestly amazing! Thanks a lot, man!

[@PeeAyeCreative]

Haha thanks, you're welcome!

[@metal4eva208]

This helped me alot thank you !!

[@PeeAyeCreative]

I'm so glad!

[@shogouenaka2336]

Hey, thanks for great tutorial! It helped me a lot!

[@PeeAyeCreative]

My pleasure, glad it helped!

[@danielaleksandrov4491]

Nice, good job!

[@ValuvatoBruno]

Thank you, that was really helpful!! A note derived from personal experience: if the row has a fixed height value it is necessary to set that to be auto again in mobile so that its content doesn't exceed it.

[@PeeAyeCreative]

I would never set a fixed height value on anything.

[@ValuvatoBruno]

@@PeeAyeCreative why not?

[@PeeAyeCreative]

@@ValuvatoBruno I simply can't think of any reason for it. Plus you mentioned it would take extra work to make it responsive. If there is some reason for it then that's great.

[@marly381]

Thank you for this great tutorial again! I really needed this! I love your tutorials and your calming way of explaining. I was already searching, but do you also have a tutorial where you explain how you can get multiple columns at your tablet or phone? Especially only shown at tablet, but not to phone? I can't figure out how to fix that issue...

[@md.habiburrahman1378]

Thank you for your help I am really appreciate to you

[@PeeAyeCreative]

Happy to help!

[@simranjeetsingh7503]

thanks you so much your video helped me on my currently running

[@PeeAyeCreative]

I'm so glad my video helped!

[@ahmadsayem8781]

Thanks a lot, man!

[@PeeAyeCreative]

You're welcome!

[@SoyezActif]

Thank you ! Nice and easy !

[@PeeAyeCreative]

Glad you liked it!

[@andres.aldean]

Thank you man! this is awsome.

[@PeeAyeCreative]

You're welcome!👍

[@soyFernandola]

Great tutorial!

[@PeeAyeCreative]

Thank you so much!

[@tokach]

Thank you. It works!

[@PeeAyeCreative]

Yes, it's a great solution! :)

[@lewisticknor]

Thanks Bro! You're awesome! Tik

[@PeeAyeCreative]

You're welcome!

[@jandan870]

greaaaaat! Thank you 🙏🙏🙏🙏🙏🙏🙏🙏

[@SimpScrapbookingNow]

Thank you for simple solution... But I did have to put flex-wrap:wrap-REVERSE; on the second line to make it work. (27 Sept 2020 - btw!)

[@PeeAyeCreative]

Should not need that but hey, whatever works!

[@MochilaNomada]

awesome content! thanks :D

[@PeeAyeCreative]

Thank you! Glad you like it!

[@TheFlowercolor]

Thank you very much for this smart and simply tip! You are B I G ! ;)

[@PeeAyeCreative]

You are welcome, I use this one a lot myself :)

[@olivercoffey3979]

Well done!

[@PeeAyeCreative]

Thank you!

[@derekmcdonald-lee892]

Legend cheers mate

[@PeeAyeCreative]

Thanks Derek!

[@christianhimmer]

Thanks dude ...

[@PeeAyeCreative]

You're welcome man!

[@percyllanosoficial]

Thank!!!

[@PeeAyeCreative]

You're welcome!

[@xmazzaaa]

Thanks

[@PeeAyeCreative]

You're welcome!

[@spennysimmo3006]

Thanks, this is great. If I wanted the stacking to happen at different breakpoints to the built in Divi breakpoints, would it work to add custom classes to the columns and then target the order of the classes in a media query?

[@PeeAyeCreative]

That's correct, anything outside of the default Desktop, Tablet, and Phone breakpoints would need to be in media queries.

[@mapexito]

Hey thanks amigo! I was looking for exactly that! Do you have any video about how to keep 2 columms on mobile instead of one below the another one?

[@PeeAyeCreative]

Yes, the other one is linked in the blog post. Here is the video: kzbin.info/www/bejne/aYiyp5ukodSajbM

[@recomposemedia4603]

Can you accomplish this with separate modules within each column as well? For example column one has two text modules and column 2 has an image. Is it possible to have the image show up between the two text modules for mobile view?

[@PeeAyeCreative]

Probably, but I've never done it. If you can do it in flex, it can be done.

[@alenkazerovnik5615]

This is great and works perfectly. Thanks. But what about when you use specialty section where left side is on or more rows with columns and right side is a module itself? Do you have any idea on how to do that?

[@PeeAyeCreative]

I have not tried that scenario. I assume with that it may require a little extra CSS to target the correct element.

[@timphelps7333]

Great tip. What if I have several modules, is there a way to stack varied modules?

[@PeeAyeCreative]

Hi Tim, I'm not sure what you mean. This works for columns, so the modules would not matter.

[@metal89fox]

really interesting! Thanks a lot ! Your tutorials are very useful. Just one question: Is there any way to set the breaking point for the row? Thanks in advance!

[@PeeAyeCreative]

Hi Mauro, can you give any more details about what you want to do?

[@metal89fox]

@@PeeAyeCreative Hi :) I'd like to apply the change you showed in the video: "kzbin.info/www/bejne/e5a0g3yCn9qohJI" but only to a section or row of a page. Specifically, I have a row with 2 columns side by side (an image on the left and a text on the right) but, when the display becomes too small, the text exceeds the height of the photo and everything becomes bad. Is there any way to change the Breakpoint of this section? Thanks :)

[@dragos.carciu]

Great tutorial. Something like this i need too, but to change the order of modules. Like sidebar on left, text image on right on desktop, and on mobile to show text, image and sidebar. That order how can be changed? Thanks!

[@PeeAyeCreative]

Hi there, thank you. I confused, what you asked is exactly what this does.

[@indaskys]

Hi thanks for your videos, please can you help i want to change the break point at 1500 pixels wide to tablet view im using divi, do u please know what css code i need. Iv found the css code to cahnge my menu breakpoint and sorted that out but cant find code to change page or row or column setting, please help been searching for days

[@PeeAyeCreative]

That would be quite a difficult process indeed to target all of the classes, but it could be done. But if this is beyond your skill level you may want to reconsider or hire a developer.

[@amarramkalup489]

Does the display flex work with more than 2 columns for mobile?

[@PeeAyeCreative]

Yes, absolutely, that the main reason for this tutorial. You can control the amount of columns on desktop, tablet, and phone with this using the responsive tabs.

[@xStrych9x]

thanks for the tutorial, great stuff, but dude, has anyone ever told you that you look like Malarkey from Band of Brothers?!?

[@PeeAyeCreative]

Haha never heard that, I can see ethe resemblance!

[@mstess164]

yes, using any sort of CSS or coding is scary to me since what you imput HAS to be correct for it to work, time consuming after using Instapage and being forced to use WordPress Divi Builder for landing pages. Your tips are useful, but my content can be upwards of 20+ modules to re-code for stacking. I appreciate your videos and will keep watching and trying to get this, but as a graphic designer, I'm not a fan of DiviBuilder, and I've been trying this for 2 months so far - very frustrated with may aspects of it. (I know you didn't create it) thanks.

[@PeeAyeCreative]

Any software has a learning curve, a d be sure to check my Future Of Divi video.

[@vijaykv4079]

Hi there, can this be possible in the speciality section of Divi?

[@jeffrudolf]

I just came here with the same question... :)

[@PeeAyeCreative]

Good question, but I don't think so because of the way they are made.

[@vijaykv4079]

@@PeeAyeCreative Hey, thanks for the reply. Is there any way??

[@scisystem]

With only two columns you could/should use ''wrap-reverse'' instead.

[@PeeAyeCreative]

Possibly yes. But it complicates it to say "for two columns do this" and "for other columns do that." I keep it simple.

[@randymurray934]

this is fine if your using this theme, doesnt help me if im hand coding the php page with no theme and just boot strap

[@PeeAyeCreative]

That's why the title says "Divi" :)

[@spitsparrow]

can anyone confirm that this still works? Ive used it before and it worked and now its not working for me

[@rociogaffoglio7677]

Hi! it didn´t work for me :(, im doing exactly the same, any recommendation?

[@PeeAyeCreative]

Hi Rocio, it works for me, so to figure it out you'll have to let me know as many details as possible.

[@OseiThibert]

how do i do this but for side by side for product page

[@PeeAyeCreative]

Are you asking about the Shop Module?

[@OseiThibert]

@@PeeAyeCreative yes I fixed it last night but I could use help on my home page

[@educationmatters5393]

Alternatively: We can create a copy of the section and use a visibility setting to make the change we want.

[@PeeAyeCreative]

This is technically an alternative, but very poor. Do not do this unless absolutely necessary.

[@ultramarinefilms8042]

how to make two columns in same row?

[@PeeAyeCreative]

You can use my other tutorial about column sizes: kzbin.info/www/bejne/aYiyp5ukodSajbM

[@PeeAyeCreative]

Also our Divi Responsive Helper plugin does this: www.peeayecreative.com/product/divi-responsive-helper/

[@SANGNGUYEN-dh7lc]

I have try so not working :( help

[@PeeAyeCreative]

What isn't working?

[@bylorib]

This did not work for me. Nothing changed on mobile...

[@PeeAyeCreative]

Hi Lori, do you care to share a link and what you tried exactly? It does work so let's figure out what is going on.

[@israamahgoub8714]

doesn't work :(

[@PeeAyeCreative]

It does work...