Divi 5 relies on native CSS flexbox. The Layout Wrapping option in Divi 5 controls whether child elements inside a flex container (like a row, column, or group) stay on a single line or wrap onto multiple lines when there’s not enough space.
Layout Wrapping Location
You can find the Layout Wrapping options in the Design Tab → Layout → Layout Wrapping of the following element types:
Section
Row
Column
Group module
Layout Wrapping Purpose
Use this option to manage how modules behave inside flex containers when the available width is limited.
Layout Wrapping Usage
It's mainly used to:
Wrap: Modules will automatically move to the following line when there isn’t enough horizontal space. Useful for responsive layouts with buttons, images, or blurbs.
No Wrap: Forces all child modules to stay in one line, even if they overflow the container. It can be useful for sliders or horizontal scrolling layouts.
How Layout Wrapping Works
In the following example, we are using a Row with 8 Columns.
Layout Wrapping → No Wrap
The columns are displayed side by side.
Layout Wrapping → Wrap
The Columns are displayed on multiple lines (rows) depending on each column's Class.
Notes: The Row's column structure can be changed using two different methods:
Clicking on the Row's Column structure icon
By editing each of the columns and changing the Column Class in the Design tab → Sizing.
Layout Wrapping → Wrap Reverse
The Columns are displayed on multiple lines (rows) depending on each column's Class, and each line of columns displays the columns in reverse order.
Use Case: Change the Column Layout on Tablet and Phone
Let's say that on the Desktop viewport, there is a layout of 8 Columns. However, on the Tablet viewport, the layout should be four columns, and on the Phone viewport, all columns should stack vertically.
Add a Row and choose 8 columns.
Switch to the Tablet viewport.
Click on the Row's column structure icon
and choose the 4-column layout.Go to the Design Tab → Layout → Layout Wrapping.
Enable the Wrap option
.Switch to the Phone viewport.
Click on the Row's column structure icon
and choose the 1-column layout option.