CSS Divi columns
How to set Divi columns stacking order?
Divi builder has a strange and annoying feature: you can’t set the column stacking order on tablets and mobile devices.
By default, the left column is on top, and then the one to the right of it, and so on. This is very annoying because the right column is often used for buttons with sign up, WooCommerce buttons, register, etc.
By default, the left column is on top, and then the one to the right of it, and so on. This is very annoying because the right column is often used for buttons with sign up, WooCommerce buttons, register, etc.
CSS set Divi column stacking order on small devices
Important: our CSS-code to set the stacking order of columns in Divi, works on Divi 4 and Divi 5.0. This has been tested extensively.
Step 1 – Put the CSS in the row settings
To control the (stacking) order of the columns on small tablet and mobile devices with Divi, you first need to add CSS to the Divi Row settings. This CSS will instruct the columns within the row to display the columns using flexbox. This allows you to specify the stacking order of the columns on any device.
Go to Row settings / Advanced tab / Custom CSS.
Paste this CSS code there in the Main element.
Go to Row settings / Advanced tab / Custom CSS.
Paste this CSS code there in the Main element.
/* Divi column stacking order with: 'order: 1;' etc. */
display: flex;
flex-wrap: wrap;- Go to Row Settings / Advanced Tab / Custom CSS
- Module Elements
- Paste the following CSS code there in the Main element
Step 2 – set CSS in every column
In the Row settings, you will see a list of columns.
- Choose the correct column
- Click on the settings icon
- Go to the Advanced tab of the column / Custom CSS.
- Module Elements
- Click on the device you want to adjust (mobile in the example) for the Main element
- The column you would like to be at top on mobile, add in the Main part: order: 1;
- In the column you want below the top one, add: order: 2;
/* CSS code to set the stacking order on small tablet and mobile. */
order: 1;
of:
order: 2;
etc.This way you can change the order of the columns everywhere on mobile devices. Since Divi 5.0 Divi is no longer limited to 3 breakpoints, but 5, 6, 7, or unlimited, you will be able to set the stacking order for each device.