In Divi, when we add columns to a row, the first column appears first on mobile, and the subsequent columns follow in sequence.
For instance, if you have a text module in the first column and an image module in the second column, the text module will be displayed first, and the image module will appear below it.
However, if you wish to display the Image Module first on mobile and the text module thereafter, there is no direct way to achieve this.
You can accomplish this with a bit of custom CSS.
Step One - Add CSS to the Row Settings:
To begin, add two lines of code in the Row Settings where the columns are placed. This CSS makes the columns use a flex display style.
Open the Row Settings by selecting the row where you want to rearrange the columns.
Within the Row Settings, navigate to the "Advanced" tab -> Custom CSS" section -> Main Element
Add the following CSS lines to the "Main Element" field:
display: flex;
flex-wrap: wrap;
Step Two - Assign a Specific Order Number to Each Column:
We'll now set specific order numbers for each column to control their display sequence on mobile devices. Follow these steps:
Step 2.1 - Open the Row Settings:
Begin by opening the Row Settings where your columns are located.
Step 2.2 - Access Column Settings:
Inside the Row Settings, you'll see a list of columns. Open the settings for each column by clicking on the gear icon located next to the column names.
Step 2.3 - Determine Mobile Display Order:
Decide which column you want to display first on mobile. For this example, let's assume you want the first column to appear last on mobile and the second column to be displayed first.
2.4 - Adjust First Column Settings:
In the settings for the first column, navigate to "Advanced" > "Custom CSS" > "Main Element." Click on the mobile icon next to the word "Main Element" and switch to the phone view to add the code for the mobile only.
Add the following CSS code to ensure it displays last on mobile:
order: 2;
Step 2.5 - Configure Second Column Settings:
Now, access the settings for the second column.
Go to "Advanced" > "Custom CSS" > "Main Element." Click on the the mobile icon next to the word "Main Element" and switch to the phone view to add the code for the mobile only.
Add the following CSS code to ensure it displays first on mobile:
order: 1;
The image module (the first column) will now appear first on mobile, followed by the text module (the second column).
Note: This article is applicable to the regular section only and does not work with the Specialty Section in Divi.
If you have multiple modules added within a column and wish to change their order or are working with Specialty Sections, you can utilize Divi's visibility option to create a dedicated mobile-only section.
For more information, please refer to the following resource: