We have recently completed scheduled maintenance to improve our product license and subscription system. If you notice any irregularities, please let us know!
Code by Day | Explore By Weekend
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.
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!
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 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!Â
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.
Don’t forget to check out our Divi Responsive Helper plugin that has this column stacking feature built into it already!
I hope you have enjoyed learning How To Control Divi Column Stacking Order On Mobile. Please share your thoughts in the comments below. If you find value in this type of post, please subscribe because we have tons of tutorials in progress to be posted!
Subscribe for more stuff like this.
We release a full tutorial every Tuesday! We also release other helpful tips, freebies, and resources throughout the week. This email list will send you an email when we post a new blog post.
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.
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?
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 🙂
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.
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.
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 😉
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.
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
on October 9, 2020 at 4:46 pm
Argh, it’s working now. horizontally scroll may be something else
Jack Lav
on December 2, 2020 at 4:30 pm
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.
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.
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?
Hi John, this tutorial only applies to columns, and specialty sections are unfortunately not columns. Sorry! 🙂
Sergio
on March 8, 2021 at 4:23 am
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.
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!
In this tutorial I will show you how to create a marketing call-to-action by adding a second line of text to any Divi module with a button.
Pin It on Pinterest
{"id":null,"mode":"button","open_style":"in_modal","currency_code":"USD","currency_symbol":"$","currency_type":"decimal","blank_flag_url":"https:\/\/www.peeayecreative.com\/wp-content\/plugins\/tip-jar-wp\/\/assets\/images\/flags\/blank.gif","flag_sprite_url":"https:\/\/www.peeayecreative.com\/wp-content\/plugins\/tip-jar-wp\/\/assets\/images\/flags\/flags.png","default_amount":500,"top_media_type":"none","featured_image_url":false,"featured_embed":"","header_media":null,"file_download_attachment_data":null,"recurring_options_enabled":true,"recurring_options":{"never":{"selected":true,"after_output":"One time only"},"weekly":{"selected":false,"after_output":"Every week"},"monthly":{"selected":false,"after_output":"Every month"},"yearly":{"selected":false,"after_output":"Every year"}},"strings":{"current_user_email":"","current_user_name":"","link_text":"Leave a tip","complete_payment_button_error_text":"Check info and try again","payment_verb":"Pay","payment_request_label":"Pee-Aye Creative","form_has_an_error":"Please check and fix the errors above","general_server_error":"Something isn't working right at the moment. Please try again.","form_title":"Pee-Aye Creative","form_subtitle":null,"currency_search_text":"Country or Currency here","other_payment_option":"Other payment option","manage_payments_button_text":"Manage your payments","thank_you_message":"Thank you for being a supporter! It is people like you who keep us going week after week!","payment_confirmation_title":"Pee-Aye Creative","receipt_title":"Your Receipt","print_receipt":"Print Receipt","email_receipt":"Email Receipt","email_receipt_sending":"Sending receipt...","email_receipt_success":"Email receipt successfully sent","email_receipt_failed":"Email receipt failed to send. Please try again.","receipt_payee":"Paid to","receipt_statement_descriptor":"This will show up on your statement as","receipt_date":"Date","receipt_transaction_id":"Transaction ID","receipt_transaction_amount":"Amount","refund_payer":"Refund from","login":"Log in to manage your payments","manage_payments":"Manage Payments","transactions_title":"Your Transactions","transaction_title":"Transaction Receipt","transaction_period":"Plan Period","arrangements_title":"Your Plans","arrangement_title":"Manage Plan","arrangement_details":"Plan Details","arrangement_id_title":"Plan ID","arrangement_payment_method_title":"Payment Method","arrangement_amount_title":"Plan Amount","arrangement_renewal_title":"Next renewal date","arrangement_action_cancel":"Cancel Plan","arrangement_action_cant_cancel":"Cancelling is currently not available.","arrangement_action_cancel_double":"Are you sure you'd like to cancel?","arrangement_cancelling":"Cancelling Plan...","arrangement_cancelled":"Plan Cancelled","arrangement_failed_to_cancel":"Failed to cancel plan","back_to_plans":"\u2190 Back to Plans","update_payment_method_verb":"Update","sca_auth_description":"Your have a pending renewal payment which requires authorization.","sca_auth_verb":"Authorize renewal payment","sca_authing_verb":"Authorizing payment","sca_authed_verb":"Payment successfully authorized!","sca_auth_failed":"Unable to authorize! Please try again.","login_button_text":"Log in","login_form_has_an_error":"Please check and fix the errors above","uppercase_search":"Search","lowercase_search":"search","uppercase_page":"Page","lowercase_page":"page","uppercase_items":"Items","lowercase_items":"items","uppercase_per":"Per","lowercase_per":"per","uppercase_of":"Of","lowercase_of":"of","back":"Back to plans","zip_code_placeholder":"Zip\/Postal Code","download_file_button_text":"Download File","input_field_instructions":{"tip_amount":{"placeholder_text":"How much would you like to tip?","initial":{"instruction_type":"normal","instruction_message":"How much would you like to tip? Choose any currency."},"empty":{"instruction_type":"error","instruction_message":"How much would you like to tip? Choose any currency."},"invalid_curency":{"instruction_type":"error","instruction_message":"Please choose a valid currency."}},"recurring":{"placeholder_text":"Recurring","initial":{"instruction_type":"normal","instruction_message":"How often would you like to give this?"},"success":{"instruction_type":"success","instruction_message":"How often would you like to give this?"},"empty":{"instruction_type":"error","instruction_message":"How often would you like to give this?"}},"name":{"placeholder_text":"Name on Credit Card","initial":{"instruction_type":"normal","instruction_message":"Enter the name on your card."},"success":{"instruction_type":"success","instruction_message":"Enter the name on your card."},"empty":{"instruction_type":"error","instruction_message":"Please enter the name on your card."}},"privacy_policy":{"terms_title":"Terms and conditions","terms_body":null,"terms_show_text":"View Terms","terms_hide_text":"Hide Terms","initial":{"instruction_type":"normal","instruction_message":"I agree to the terms."},"unchecked":{"instruction_type":"error","instruction_message":"Please agree to the terms."},"checked":{"instruction_type":"success","instruction_message":"I agree to the terms."}},"email":{"placeholder_text":"Your email address","initial":{"instruction_type":"normal","instruction_message":"Enter your email address"},"success":{"instruction_type":"success","instruction_message":"Enter your email address"},"blank":{"instruction_type":"error","instruction_message":"Enter your email address"},"not_an_email_address":{"instruction_type":"error","instruction_message":"Make sure you have entered a valid email address"}},"note_with_tip":{"placeholder_text":"Your note here...","initial":{"instruction_type":"normal","instruction_message":"Attach a note to your tip (optional)"},"empty":{"instruction_type":"normal","instruction_message":"Attach a note to your tip (optional)"},"not_empty_initial":{"instruction_type":"normal","instruction_message":"Attach a note to your tip (optional)"},"saving":{"instruction_type":"normal","instruction_message":"Saving note..."},"success":{"instruction_type":"success","instruction_message":"Note successfully saved!"},"error":{"instruction_type":"error","instruction_message":"Unable to save note note at this time. Please try again."}},"email_for_login_code":{"placeholder_text":"Your email address","initial":{"instruction_type":"normal","instruction_message":"Enter your email to log in."},"success":{"instruction_type":"success","instruction_message":"Enter your email to log in."},"blank":{"instruction_type":"error","instruction_message":"Enter your email to log in."},"empty":{"instruction_type":"error","instruction_message":"Enter your email to log in."}},"login_code":{"initial":{"instruction_type":"normal","instruction_message":"Check your email and enter the login code."},"success":{"instruction_type":"success","instruction_message":"Check your email and enter the login code."},"blank":{"instruction_type":"error","instruction_message":"Check your email and enter the login code."},"empty":{"instruction_type":"error","instruction_message":"Check your email and enter the login code."}},"stripe_all_in_one":{"initial":{"instruction_type":"normal","instruction_message":"Enter your credit card details here."},"empty":{"instruction_type":"error","instruction_message":"Enter your credit card details here."},"success":{"instruction_type":"normal","instruction_message":"Enter your credit card details here."},"invalid_number":{"instruction_type":"error","instruction_message":"The card number is not a valid credit card number."},"invalid_expiry_month":{"instruction_type":"error","instruction_message":"The card's expiration month is invalid."},"invalid_expiry_year":{"instruction_type":"error","instruction_message":"The card's expiration year is invalid."},"invalid_cvc":{"instruction_type":"error","instruction_message":"The card's security code is invalid."},"incorrect_number":{"instruction_type":"error","instruction_message":"The card number is incorrect."},"incomplete_number":{"instruction_type":"error","instruction_message":"The card number is incomplete."},"incomplete_cvc":{"instruction_type":"error","instruction_message":"The card's security code is incomplete."},"incomplete_expiry":{"instruction_type":"error","instruction_message":"The card's expiration date is incomplete."},"incomplete_zip":{"instruction_type":"error","instruction_message":"The card's zip code is incomplete."},"expired_card":{"instruction_type":"error","instruction_message":"The card has expired."},"incorrect_cvc":{"instruction_type":"error","instruction_message":"The card's security code is incorrect."},"incorrect_zip":{"instruction_type":"error","instruction_message":"The card's zip code failed validation."},"invalid_expiry_year_past":{"instruction_type":"error","instruction_message":"The card's expiration year is in the past"},"card_declined":{"instruction_type":"error","instruction_message":"The card was declined."},"missing":{"instruction_type":"error","instruction_message":"There is no card on a customer that is being charged."},"processing_error":{"instruction_type":"error","instruction_message":"An error occurred while processing the card."},"invalid_request_error":{"instruction_type":"error","instruction_message":"Unable to process this payment, please try again or use alternative method."},"invalid_sofort_country":{"instruction_type":"error","instruction_message":"The billing country is not accepted by SOFORT. Please try another country."}}}},"fetched_oembed_html":false}
Great tutorial, works like a charm! Thank you 🙂
Hi Maksym,
I’m very happy you found this and that it worked out so well for you! 🙂
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?
Never mind, I didn’t click the mobile icon first! Perfect!!! Thanks Nelson! Great stuff!
Hey Kathy,
Yes I was just going to say, you need to adjust it for Desktop, Tablet, or Phone. Glad you got it!
Wonderful !
Un mot pour les francophones comme moi : Bravo ça marche super !
I’m so glad it works! Thanks for the greed feedback! 🙂
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
Hi Francois, my tutorial works great and is much simpler than theirs. But if you got it to work and are satisfied, then that’s all that matters.
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.
incredible
Thank you, I really love how easy this is!
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!
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 🙂
Is there something else I need?
I can’t make it work.
Hi Bautista,
This works, I’d have to know what you tried in order to help much beyond that. Let me know.
Love the tutorial! It was working great then it suddenly stopped. Was there an update that might have broken it?
Hi Adam,
I certainly still works, I just double checked. It may not show in the Visual Builder, but that’s to be expected.
This!!!!!!!
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!
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.
You’re welcome, Dave! So glad I could help solve the issues!
Super awesome tutorials. Using flex layout techniques is super easy. Thanks for the tips.
You’re welcome, Aiman! I’m glad you like the tutorials!
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.
CSS is usually not affected in the Visual Builder, so no. The only way to get this live is in our Divi Responsive Helper plugin.
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.
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.
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
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.
Don;t you just need to enable “equalise column heights” on the row to enable flex?
Yes but that would be an extra step. Still need my CSS flex wrap, so yeah, an extra step.
Fix works, then after save doesn’t stick. ???
Hi John, not sure what you mean, the code is not there when you go back in to the builder?
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/
Argh, it’s working now. horizontally scroll may be something else
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.
Thanks a million.
I love the simplicity of this solution! No need for CSS classes or plugins.
Yes it is a great solution!
Awesome! How can i make it work on a specialty section?
Hi Rafael,
Specialty sections will not work since those are not columns, but rather a weird combination of section and rows.
thank you SO much for this simple hack!!
You’re welcome Emily, glad you like it!
Great post!
Thank you!
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.
Hi John,
Make sure you are only applying the code to Tablet and Phone in the CSS tabs and that should solve that.
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?
Hi John, this tutorial only applies to columns, and specialty sections are unfortunately not columns. Sorry! 🙂
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.
CSS will not be broken with any Divi update, but a child theme is always recommended.
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.
You can try the toggles in Divi>Role Editor>Portability.
Total gamechanger. Thanks!
You’re welcome, James!
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!
That’s so great to hear Janita! Love this!
Exxxxcellent! I even tried another option first and it was a catastrophe. You never disappoint, Nelson!
Great Drew, so happy to hear this!