Divi 5 relies on native CSS flexbox. Flex Layout Direction sets the central axis of a flex container and determines whether that axis runs from left to right or right to left.
Under the hood, it maps directly to the CSS flex-direction property (row | row-reverse | column | column-reverse).
You can control the Layout Direction in the Design Tab → Layout option group for Sections, Rows, Columns, and Module Groups.
Layout Direction Breakdown
Row
(default)
Flow: Items line up horizontally from left to right.
Usage: Items are displayed side-by-side
Row Reverse
Flow: Items line up horizontally from right to left.
Usage: Items are displayed side by side in reverse order, where the first item is displayed last and the last item is displayed first.
Column
Flow: Items line up vertically from top to bottom.
Usage: Items are displayed in a "column layout" from top to bottom. This is great for use in combination with Customizable Breakpoints to adjust the flow of items on mobile devices, such as Phones.
Column Reverse
Flow: Items are lined up vertically, but in reverse order.
Usage: Items are displayed in a "column layout" from top to bottom. This is great for use in combination with Customizable Breakpoints to adjust the flow of items on mobile devices, such as Phones.
Use Case Examples
1. Row (default)
Use this when you want modules to be arranged horizontally from left to right.
Example:
You have an icon, a heading, and a button. In a Row layout, they’ll sit next to each other in a single horizontal line:
[Icon] [Heading] [Button]
2. Row Reverse
This arranges modules in a horizontal line, but in reverse order - from right to left.
Example:
Using the same icon, heading, and button setup, they’ll now appear:
[Button] [Heading] [Icon]
Use Case:
Great for right-aligned headers or when switching layouts for RTL (right-to-left) languages without manually restructuring the module order.
3. Column
Modules stack vertically from top to bottom.
Example:
Your elements will appear in a vertical stack:
[Icon]
[Heading]
[Button]
Use Case:
Perfect for mobile layouts or hero sections where you want to guide attention from top to bottom.
4. Column Reverse
Same as Column, but the order is reversed from top to bottom.
Example:
[Button]
[Heading]
[Icon]
Use Case:
Useful when you want to reverse the visual flow on smaller devices without duplicating content. For example, showing a call-to-action before supporting text.