How To Manually Set Divi Column Stacking Order on Mobile [Super Easy]
ฝัง
- เผยแพร่เมื่อ 2 ส.ค. 2024
- 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/
![เบิ้ล ปทุมราช - อ้ายกินดอง น้องลาบงัว ft. สแน็ก อัจฉรีย์ [OFFICIAL MV]](http://i.ytimg.com/vi/-OK--KaSPcI/mqdefault.jpg)
![หมานแต่ผัวเขา - แสตมป์ โตเกียวมิวสิค [ OFFICIAL MUSIC VIDEO ]](http://i.ytimg.com/vi/m0g1TSBJPgo/mqdefault.jpg)
I cannot tell you how many times i come back to your tutorials when i need help. you're a star Nelson. Thank you!
Happy to help! I'm so glad you enjoy the resources.
@@PeeAyeCreative Ditto! Thank you Nelson!
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!
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 :)
Thank you saved me at 03:22 am on a Sunday trying to sort this
That's great, John! I'm glad this helped you out in those morning hours :)
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.
You're welcome Amanda! So glad you found our channel! Enjoy!
Excellent. Your tutorials are always gold. Thanks again.
Glad you like them!
This is what i need. This is more easier to use more than other tutorial video.
Yes, I think the other ones involve quite a lot of CSS. :)
I just applied it to my website and it works perfectly fine 👌🏻 Thank you so much!
Hi Solvei, that's so good to hear!
omg! thank you!! 2 days figuring out how to do this !!
Awesome tutorials!! Thanks! This one and the previous tutorial helped me a lot.
Thank you! I'm so glad they are helpful, I know those two are some of my favorites!
Thank you so much for this tutorial! You're a great instructor!
You're welcome, I'm so glad you like it!
This is an amazing tutorial! Thank you so much! I'm subscribing right now!
Awesome, thank you!
Thank you!!! so much easier than other stuff I found.
Glad it helped! Yes this is much easier than the other ones about this. :)
Awesome! It was super easy, thanks for your tips! You got a new follower
I'm so glad it was easy! Let me know if you ever have ideas for tutorials!
Thank you so much. Again a very helpful tutorial. Saved me a lot of time!
Great to hear!
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...
PEE-AYE. I. LOVE. YOU!!!
😊
You are the best, that is clear. Huge thanks!
Happy to help!
Honestly amazing! Thanks a lot, man!
Haha thanks, you're welcome!
Nice, good job!
You are the BEST!!!
Thank you 😊 So glad you like it!
Thank you, Boss, It's a very very helpful video!
You are most welcome, I'm so glad you found it helpful!
I'm from Brazil and I was looking for that. Thanks
You're welcome, I'm glad you found it!
You are my new hero, thanks!
Happy to be!
Hey, thanks for great tutorial! It helped me a lot!
My pleasure, glad it helped!
Thank you man! this is awsome.
You're welcome!👍
Thank you ! Nice and easy !
Glad you liked it!
Great tutorial!
Thank you so much!
This helped me alot thank you !!
I'm so glad!
Thank you. It works!
Yes, it's a great solution! :)
Thanks a lot, man!
You're welcome!
Thank you for your help I am really appreciate to you
Happy to help!
greaaaaat! Thank you 🙏🙏🙏🙏🙏🙏🙏🙏
thanks you so much your video helped me on my currently running
I'm so glad my video helped!
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.
I would never set a fixed height value on anything.
@@PeeAyeCreative why not?
@@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.
Well done!
Thank you!
Thanks Bro! You're awesome! Tik
You're welcome!
Legend cheers mate
Thanks Derek!
awesome content! thanks :D
Thank you! Glad you like it!
Thanks dude ...
You're welcome man!
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?
That's correct, anything outside of the default Desktop, Tablet, and Phone breakpoints would need to be in media queries.
Thank!!!
You're welcome!
Thank you very much for this smart and simply tip! You are B I G ! ;)
You are welcome, I use this one a lot myself :)
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?
Yes, the other one is linked in the blog post. Here is the video: th-cam.com/video/3WOvhnlogWQ/w-d-xo.html
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?
Probably, but I've never done it. If you can do it in flex, it can be done.
Thanks
You're welcome!
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
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.
Great tip. What if I have several modules, is there a way to stack varied modules?
Hi Tim, I'm not sure what you mean. This works for columns, so the modules would not matter.
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?
I have not tried that scenario. I assume with that it may require a little extra CSS to target the correct element.
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!
Hi Mauro, can you give any more details about what you want to do?
@@PeeAyeCreative Hi :)
I'd like to apply the change you showed in the video: "th-cam.com/video/EeQRILjuuN0/w-d-xo.html" 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 :)
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!)
Should not need that but hey, whatever works!
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!
Hi there, thank you. I confused, what you asked is exactly what this does.
Does the display flex work with more than 2 columns for mobile?
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.
Hi there, can this be possible in the speciality section of Divi?
I just came here with the same question... :)
Good question, but I don't think so because of the way they are made.
@@PeeAyeCreative Hey, thanks for the reply. Is there any way??
thanks for the tutorial, great stuff, but dude, has anyone ever told you that you look like Malarkey from Band of Brothers?!?
Haha never heard that, I can see ethe resemblance!
can anyone confirm that this still works? Ive used it before and it worked and now its not working for me
how do i do this but for side by side
for product page
Are you asking about the Shop Module?
@@PeeAyeCreative yes
I fixed it last night but I could use help on my home page
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
That's why the title says "Divi" :)
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.
Any software has a learning curve, a d be sure to check my Future Of Divi video.
Hi! it didn´t work for me :(, im doing exactly the same, any
recommendation?
Hi Rocio, it works for me, so to figure it out you'll have to let me know as many details as possible.
With only two columns you could/should use ''wrap-reverse'' instead.
Possibly yes. But it complicates it to say "for two columns do this" and "for other columns do that." I keep it simple.
how to make two columns in same row?
You can use my other tutorial about column sizes: th-cam.com/video/3WOvhnlogWQ/w-d-xo.html
Also our Divi Responsive Helper plugin does this: www.peeayecreative.com/product/divi-responsive-helper/
I have try so not working :( help
What isn't working?
Alternatively: We can create a copy of the section and use a visibility setting to make the change we want.
This is technically an alternative, but very poor. Do not do this unless absolutely necessary.
This did not work for me. Nothing changed on mobile...
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.
doesn't work :(
It does work...