Code by Day | Explore By Weekend

Column Stacking for the Divi Responsive Helper Plugin by Pee Aye Creative

Home » Docs » Divi Responsive Helper » Using The Column Stacking Settings

Documentation & Support

Using The Column Stacking Settings

Enable Divi Responsive Helper Column Stacking Settings and Features

How To Use The Column Stacking Order Feature

Column Order

If you would like to control the order in which columns stack on your Divi website, then enable the toggle called “Column Order.” This setting adds new custom settings to the Divi Builder which allow you to set the stacking order for the columns on Tablet and Phone.

how to enable column stacking order in Divi columns

Adjusting Column Order In The Divi Builder

Once the Column 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 on both Tablet and Phone
  • Enable Column Stacking on Tablet only
  • Enable Column Stacking on Phone only
Divi Responsive Helper Column Stacking Order setting
choose a Divi Responsive Helper Column Stacking Order option for tablet or phone

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 called Stacking Order On Tablet and Stacking Order On Phone. Each of these has a dropdown where you can select your choice of one through eight.

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.

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

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

Divi Column Stacking Order Demo

The GIF below demonstrates the Column Stacking Order feature.

1.3 Column Stacking Order

How To Use The Number Of Columns Feature

Column Number

If you would like to control the number of columns that stack side by side in each row for each device on your Divi website, then enable the toggle called “Number of Columns.” This setting adds new custom settings to the Divi Builder which allow you to set the number of columns that stack side by side on Tablet and Phone.

how to control the number of columns on each device in Divi

Adjusting The Number Of Column In The Divi Builder

Once the Number of Columns 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 two new options:

  • Number of Columns on Tablet
  • Number of Columns on Phone

These are set to default, so to change it simply choose a number for Tablet and another number for Phone.

Divi Responsive Helper Column Stacking Number setting
choose the Divi Responsive Helper number of columns for tablet or phone

Divi Column Stacking Number of Columns Demo

The GIF below demonstrates the Column Stacking Number of Columns feature.

1.3 Number of Columns

Last updated Sep 16, 2020 @ 4:16 pm

Get Support

Something not going well? We are happy to help!

All we ask is that you browse our documentation first before contacting us. We add anwers to every question we receive.

Is the question or issue related to WordPress?

If yes, please contact your hosting provider for help.

Is the question or issue related to Divi?

If yes, please be sure read the Divi documentation or contact Elegant Themes support.

Is the question or issue related to our product?

If you think the answer is yes, then please fill out the form and we will be happy to help get this resolved!

Pin It on Pinterest

0

Your Cart