Change the Divi Column Stacking Order on Mobile

Divi is a responsive WordPress theme that will automatically adjust your site layout depending on the screen it’s viewed on.

So, if you have a multi-column layout, Divi will automatically stack one column on top of the other to fit smaller screen sizes as various Divi breakpoints are activated.

But, by default, the Divi column stacking order goes from left to right.

To give you an idea of how the feature works, here’s an image of a two-column layout in desktop mode.

Divi 2 column layout

We have prepared a basic two-column layout. In the top row, we see an image module on the left column and a text module on the right. Underneath we have a second row where the text module is to the left and the image module is on the right.

Now, look at how the columns rearrange themselves when viewed from a much smaller phone screen.

Divi Column Stacking demo

As you can see, in the first row, the elements stack themselves with the left column at the top and the right column underneath it. The same happens for the elements in the second row.

This particular method of stacking columns works for most users but not for everyone.

And so, we have put together a detailed tutorial on how to change the Divi column stacking order on mobile. Here, we will walk you through 2 step-by-step guides so you can easily implement them on your own Divi website and customize how you want the columns to stack when viewed from different screen sizes.

So without further ado, let’s get started:

Method 1: Use the “Disable On” feature to change Divi Column Stacking order

For those of you who don’t know, the Divi Builder has a feature called “Disable On.” As the name suggests, it allows you to disable particular modules or sections from your Divi layouts. You can use it to easily create different versions of your content for different screen sizes – phone, tablet, and desktop.

For example, let’s take into account the two-column layout we showed earlier.

We want to make it so that the second row doesn’t stack the text on top of the image.

To do this, we first create a “duplicate” of the second row.

Create a duplicate row

Once that’s done, head into the “Row Settings” of the original second row. From there, go to the Advanced> Visibility > Disable On and checkmark “Phone,” and “Tablet”. Once done click on the “green tick” icon to save it.

Disable original row for phone and tablet

This is going to hide the “Second Row” when viewed from a phone or tablet.

Next, re-arrange the columns in the Duplicate Row. Remember to re-position the modules from left to right. The leftmost element will appear at the top and each subsequent element underneath it when viewed from a phone or tablet.

So, since we want the image to appear before the text, we will move the image to the left and the text to right.

Re-arrange the columns of duplicate row

After re-arranging the duplicate row, access its settings, and like before go to Advanced >Visibility> Disable On and select “Desktop”.

Disable duplicate row for desktop

This will hide the duplicate row on the desktop but keep it visible on phones and tablets.

Note: Sections that are “hidden” or “disabled” will appear faded in the Divi Builder.

And that’s all the setup we will need. Now let’s check the results.

Re-arranged Divi Column Stacking

As you can see, the column stacking behavior is working just like we want it to.

We are still using the default Divi column stacking functionality. All we did was add an extra duplicate section and re-arrange the column order to look good on phones and tablets. Next, we disabled the original section on phones and tablets but kept it enabled on desktops. Likewise, we disabled the duplicated re-arranged column on desktops but kept it active on phones and tablets.

And with this simple trick, you can potentially bypass the Divi column stacking order and get your columns to arrange themselves just the way you like.

Drawbacks

The “Disable On” method is excellent if you just want to make minor tweaks to a few sections. However, if you need to tweak the column stacking function on multiple sections then this method can get really complicated and tedious.

Furthermore, disabling or hiding a section means it won’t be visible to your site visitors. However, the content will still be visible to search engine bots. And following this reason, there has been much debate that having duplicate content on your site (even if it’s hidden) can negatively affect your incoming traffic.

Now, search engines like Google are smart enough to understand the use of hiding elements for creating responsive layouts. But still, you might not want to take the gamble and ruin your SEO score.

And so, following these reasons, we have included a second method you might be interested in.

Method 2: Change Divi Column Stacking order using CSS

Disclaimer: Before you get scared about using CSS, we’ll only use a couple of lines of code. Also, it’s all provided here. All you need to do is follow the given instructions and copy and paste the code snippets in the appropriate fields.

Using CSS we can easily tell the specific columns of each row on how to stack on top of each other. To do this, we’ll again use the 2-column layout we worked on after removing the duplicate row and turning off the “Disable On” feature.

Now, the first thing we need to do is access the “row settings” for the section where we intend on changing the column stacking order. Next, go to the Advanced tab and into the Custom CSS section.

Inside, paste the following CSS code snippet into the Main Element.

display: flex;

flex-wrap: wrap;

Add custom CSS to row

Next, inside the “Row Settings”, under the “Content” tab, you’ll find a list of all containing columns.

Column Settings

Click on the “gear icon” beside the Column that you want to tweak. Inside, go into the Advanced tab and then into the “Custom CSS” section.

Here, under the Main Element section, you’ll need to add the following line of code if you want that column to be on top.

order: 1;

Change column order with CSS

Similarly, if you want it in second or third place, you’ll enter the following codes respectively:

order: 2;

or

order: 3;

Also, by clicking the “phone” icon beside the Main Element section you can set for which device you want this CSS code to be active. This allows you to fine-tune the column stacking for different sized screens.

Change column order for phone view

And that’s it! You now know how to change the Divi column stacking order using custom CSS.

Divi Column Stacking changed

Wrapping Up

And that brings us to the end of our detailed guide on how to change the Divi Column Stacking order. We hope you found this read useful and that it helped you to tweak and manage your column elements/modules and how they appear on your Divi website.

With that said, if you stumble into any sort of problem setting this up, write us a comment explaining your problems. We’ll try our best to reply asap with a potential fix for your issues.