The Order option in Divi 5 allows you to define the display sequence of modules within a flex container (row, column, or group). The Order option is particularly useful when the natural DOM order doesn’t match your visual layout needs, especially in responsive views.
Instead of rearranging modules in the builder, you can use the Order option to move them visually without affecting their backend (code) structure. It’s useful when switching between different Layout Directions (row and column directions) or changing layout across different breakpoints.
How to Use the Order Option
Open the settings of an element inside a flex-enabled Section, Row, Column, or Group.
Go to the Content tab → Order option group.
Enter the numeric value that represents the order in which the element should be displayed:
Lower numbers show first.
The default order is based on the module's placement in the builder.
Use Case
Let's assume that you have a Row with three Columns:
Column 1 contains an Image module.
Column 2 contains a Heading module.
Column 3 contains a Button module.
While on the Desktop, the order is fine, on the Phone viewport, the Button module is supposed to be displayed between the Heading module and the Image module. In this case, you can:
Switch to the Phone viewport.
Edit the first column's settings (which contains the Image module).
Go to the Content tab → Order option group.
In the Display Order field type 3.
Edit the second column's settings (which contains the Heading module).
Go to the Content tab → Order option group.
In the Display Order field type 1.
Edit the third column's settings (which contains the Button module).
Go to the Content tab → Order option group.
In the Display Order field type 2.
With those changes, on the Phone viewport, the order of the columns will be:
Column 2 contains the Heading module.
Column 3 contains the Button module.
Column 1 contains the Image module.