Divi Responsive Helper

Documentation & Support

Still Need Help?

If you have a question not covered here in the docs, or if you face any technical issue, you can reach out to us.

Visit Our Support Page

Divi Responsive Helper Plugin by Pee Aye Creative

Ready To Purchase?

Visit the product page to get all the details and make your purchase.

View Product

five star rating_1

Are You Enjoying Divi Responsive Helper?

If you are enjoying the Divi Responsive Helper plugin, we would really appreciate it if you could share a public review! ❤️

It is such a blessing to hear your feedback, and reviews help other Divi users make informed decisions about the value of our products.

Leave A Review

Row Column Stacking Order settings in the Divi Responsive Helper Plugin by Pee Aye Creative

Row Column Stacking Order

Discover how to customize the stacking order of columns in rows for better responsive layouts in Divi.

NOTE: This feature works great with the Row Number of Columns feature.

How To Use The Row Column Stacking Order Feature

1. Enable This Feature In Theme Options

To begin using the column stacking settings, go to the Divi>Theme Options. There you will see a new tab that our plugin adds called “Divi Responsive Helper.” Once you click on that, you will see more tabs. Click on the “Column Stacking” tab to see all of the column stacking features in the plugin.

Enable the setting toggle called “Row Column Stacking Order.” Enabling this feature activates the additional settings located in the Advanced tab of the Divi Builder Row and Column settings for choosing the order in which columns stack on each device.

Divi Responsive Helper Row Column Stacking Order Setting

2. Adjust Column Order In The Divi Builder

Once the Row Column Stacking Order setting is enabled in Divi Theme Options, a new set of settings will appear in every Row in the Divi Builder.

  1. Open up the Row Settings by clicking the gear icon.
  2. Go to the Advanced tab.
  3. Open the CSS ID & Classes Toggle.

There you will see a new option called Enable Column Stacking Order. This is on the normal Divi stacking order by default, so you need to choose one of the following options three options:

  • Enable Column Stacking Order on both Tablet and Phone
  • Enable Column Stacking Order on Tablet only
  • Enable Column Stacking Order on Phone only
Divi Responsive Helper Column Stacking Order setting
choose a Divi Responsive Helper Column Stacking Order option for tablet or phone

3. Select The Individual Column Stacking Order

Once you enable the column stacking order setting you desire, you can proceed to the Content tab of the Row Settings.

  1. Open up the individual Column Settings by clicking the gear icon.
  2. Go to the Advanced tab.
  3. Open the CSS ID & Classes Toggle.

There you will see two new options:

  • Column Stacking Order On Tablet
  • Column Stacking Order On Phone

Each of these has a dropdown where you can select your choice of numbers from one through eight.

choose a Divi Responsive Helper Column Stacking Order in each column for tablet or phone
Divi Responsive Helper Column Stacking Settings in the Row

NOTE: You need to assign an order to EACH column!

When changing the column stacking order on Tablet or Phone, you need to make sure you set an order for each column. This important, otherwise the order will be conflicting with the default order and it won’t know what to do. Setting a different number for each column clearly specifies the order you want them to stack on each device.

For example, if you have a row with three columns, and want to swap columns one and three on mobile, you would also have to assign “Two” to column two.

Example Of The Divi Row Column Stacking Order In Action

The GIF below demonstrates the Row Column Stacking Order feature.

Divi Responsive Helper Column Stacking Order
Last updated August 30, 2024
0

Your Cart