Overview
Rows that look great on desktop often break down on smaller screens, with columns stacking in awkward ways or appearing in the wrong order. Divi’s default responsive behavior works in many cases, but it does not always give you enough control over how columns adapt across devices.
The Divi Responsive Helper plugin adds advanced layout controls for rows, allowing you to decide how many columns appear side by side on each device and exactly how those columns stack when space becomes limited. These features work together to help you create responsive layouts that remain clear, intentional, and easy to read across all screen sizes.
The GIF below demonstrates the column stacking order feature (shown in Divi 4):
The GIF below demonstrates the number of columns feature (shown in Divi 4):
How Column Stacking Works in Divi Responsive Helper
The column stacking features in Divi Responsive Helper work in two stages.
First, the features must be enabled globally in Theme Options (Divi 4) or in our settings interface (Divi 5). This makes the column stacking controls available inside the Divi Builder, but it does not change the layout on its own.
Second, the stacking behavior is configured directly inside the builder. Some settings apply at the Row level, while others apply at the individual Column level. This two-step approach gives you full control while keeping the default Divi behavior unchanged unless you explicitly opt in.
Because column stacking order and column stacking number are often used together, they are documented together here.
How To Use
Step 1: Enable Column Stacking Features Globally Divi 4
To start using the column stacking features in Divi 4, go to the Divi > Theme Options menu in your WordPress backend, then select the Divi Responsive Helper tab, which our plugin adds. Select the Column Stacking subtab and enable the following settings:
- Row Number of Columns
- Row Column Stacking Order
Enabling these global settings does not change any layouts on its own. It only activates the necessary settings inside the Divi Builder so they can be configured on individual rows and columns.
Step 1: Enable Column Stacking Features Globally Divi 5
To start using the column stacking features in Divi 5, go to the Pee-Aye Creative menu in your WordPress backend, then select Divi Responsive Helper. In the plugin settings interface, open the Column Stacking order & Number tab from the left sidebar. From there, enable the following settings:
- Row Number of Columns
- Row Column Stacking Order
Enabling these global settings does not change any layouts on its own. It only activates the necessary settings inside the Divi Builder so they can be configured on individual rows and columns.
Step 2: Configure Column Stacking At The Row Level Divi 4
After enabling the features globally, column stacking is configured on a per-row basis inside the Divi Builder.
Open the Row Settings by clicking the gear icon on the row you want to control.
In the Advanced tab, open the CSS ID & Classes toggle. You will see new settings added by Divi Responsive Helper.
Once the Row Number of Columns setting is enabled in Divi Theme Options, a new set of settings will appear in every Row in the Divi Builder.
Set the Number of Columns
The Row Number of Columns settings allow you to choose how many columns remain side by side on Tablet and Phone.
You can set:
- Number of Columns on Tablet
- Number of Columns on Phone
These settings determine how many columns appear in a single row before stacking occurs.
Enable Column Stacking Order
If you want to control the order in which columns stack, you must also enable column stacking order at the row level.
In the same Row settings area, choose one of the following options:
- Enable Column Stacking Order on both Tablet and Phone
- Enable Column Stacking Order on Tablet only
- Enable Column Stacking Order on Phone only
This step tells Divi that the stacking order will be controlled manually for this row.
Step 2: Configure Column Stacking At The Row Level Divi 5
Divi 5 Differences
Divi 5 introduces a redesigned builder interface and a new layout system. Because of this, the location of the row-level column stacking settings has changed.
Layout Style Requirement
In Divi 5, row layout behavior is controlled by a Layout Style setting using one of the following layout modes:
- Block
- Flex
- Grid
The column stacking features in Divi Responsive Helper are designed to work with the Block layout style, which matches the behavior of rows in Divi 4.
Before adjusting column stacking settings, make sure the Layout Style is set to Block. Depending on how the row was created, Block may not be selected by default. NOTE: The setting only becomes available when Block is selected.
Setting the Number of Columns
Open the Row settings and go to the Design tab to the Layout toggle. There, you will see the Number of Columns setting added by our plugin (when the Layout Style is set to Block).
This setting can be adjusted per breakpoint using Divi 5’s responsive editing controls, allowing you to define how many columns remain side by side on Desktop, Tablet, or Phone.
Step 3: Configure Column Order At The Column Level Divi 4
Once column stacking order is enabled for a row, you can define the stacking order for each individual column.
Open the settings for each column in the row by clicking the gear icon.
In the Advanced tab, open the CSS ID & Classes toggle. You will see two new options:
- Column Stacking Order on Tablet
- Column Stacking Order on Phone
Each option includes a dropdown where you can assign a numeric order value.
Important Notes About Column Order
You must assign an order value to every column in the row.
If one or more columns are left unset, the stacking order may conflict with the default Divi behavior, resulting in unexpected layouts.
For example, if a row has three columns and you want to swap the first and third columns on mobile, you must still assign an order value to the second column. Each column needs a unique number so the stacking order is clearly defined.
Step 3: Configure Column Order At The Column Level Divi 5
Divi 5 Differences
Column stacking order is handled differently in Divi 5 due to its breakpoint-based editing system. In Divi 5, settings are edited directly at the breakpoint level. As a result, column stacking order only appears when it is relevant, which can be surprising at first but ultimately provides clearer and more predictable control.
Breakpoint-Specific Visibility
Column stacking order does not apply to the default Desktop breakpoint, which means the setting is not available when working in the builder with the default Desktop breakpoint view. The setting is only visible when the corresponding breakpoint is active in the builder, so if you do not see the column stacking order setting, it’s not a bug; it’s just how responsive editing works in Divi 5.
Where To Find The Column Order Setting
Open the Column settings and go to the Design tab to the Layout toggle. Remember, the setting only shows when you are not on the Desktop breakpoint. For users who were familiar with our plugin in Divi 4, note that this location has changed compared to the Divi 4 workflow, where column order was set in the CSS ID & Classes toggle, which no longer exists.
Just like in Divi 4, you must assign an order value to every column in the row to apply a different value to each one; otherwise, they would compete for placement, and things may stack in unexpected ways.
NOTE: The Column Order setting, which is added by our plugin, only becomes available when the Layout Style dropdown is set to Block AND you switch to Tablet or Phone. It will not show on Desktop since it is irrelevant there.
Bonus Tip: Override The Column Stacking Margin With CSS
If you encounter a situation where, due to the column stacking order and the number of columns side by side, our plugin sets a hard-coded margin value, and you want to change it, you can do that with CSS. The main thing to remember is to use !important to override Divi. You can also modify this further with the following trick.
You first need to assign an ID to the row where they want to override the margins or CSS of Divi Responsive Helper, and then use the ID selector to override the CSS.
- Add an ID such as “pac-drh-right-margin-fix” to the Row settings>Advanced tab>Custom CSS & IDs toggle>ID input field
- Add the following CSS snippet to your Divi Theme Options or child theme:
#pac-drh-right-margin-fix {
margin-right: 0!important;
}
And of course you can customize that value to whatever you want. This demonstrates how the process works by assigning an ID to overide the specificity of the targeting on the column.
