Divi lets you lay out web pages in sections, rows, columns and modules. This lets you, for example, display modules side-by-side, by placing them in 2 columns within a row. On mobile, however, Divi will vertically stack the columns in a row. If you want to instead keep columns side-by-side on mobile, this tutorial will show you how.
To make Divi keep two columns side-by-side on mobile, you can add some custom CSS into the row's settings. In particular, setting the row's display property to "flex" will cause the columns to stay next to each other, rather than stacking one above the other.
We'll show you how to do that in detail below. But first, let's take a quick look at how things appear before and after the changes.
Before
Normally, if you view a two column row in Divi on mobile, you'll see that the two columns have been stacked one above the other, instead of remaining side-by-side:

After
Here's the effect we're trying to achieve instead, where we keep the divi columns side-by-side on mobile:

Show Divi Columns Side-by-Side on Mobile using CSS
To instead display the modules side-by-side on mobile, we can set them to use the CSS "flex" property. Here's how to do it.
Open your Page for Editing in the Visual Builder
Browse to the page you want to apply the change to. Then, in the WordPress admin bar at the top of the page, click the "Enable Visual Builder" button to open the page for editing in the Divi Builder.

Open the Row's Settings
Locate the row you want to modify, or add it to your layout if you haven't already. Then, hover over the row to reveal the green row buttons. If your Divi Builder is set to use "Click" mode, you may need to click on the row instead of hovering. Click the "Gear" icon to open the row's settings.

Set the Row to Flex Mode in its Custom CSS
Now, to display the divi columns side-by-side on mobile, we will set them to use the CSS "flex" property, which will lay out the columns next to each other.
To do this, click on the "Advanced" tab in the row settings, then under "Custom CSS", click on "Module Elements". Finally, in the "Main Element" box, enter:
display: flex;

Save the Row Settings
To save the changes to the row, click the green check mark button at the bottom of the row settings.

Save the Page
When you are ready, save the whole page by opening the Page Settings toolbar, by clicking on the round purple "three-dots" button at the bottom of the visual builder are, and clicking on the "Save" button.

View the Result
If you now take a look at your page on the front-end you should find that you now have 2 columns on mobile, each occupying 50% of the width, instead of stacked columns taking up a full 100% width.

You may need to make adjustments to make the columns look right in the smaller column width they are now allocated. But don't worry, all the usual module settings – font sizes, margin and padding will work as normal and can be used to tweak the design.
At this point, you may find our post on using responsive values in Divi module settings helpful – it explains how to modify settings on mobile without affecting your existing desktop design.
Show Divi Specialty Section Columns Side-by-Side on Mobile using CSS
If you're using Divi's specialty sections, and want all the elements to line up, then the above won't work, as the row settings are applied only to certain parts of the specialty section. To solve this we can instead apply the flex settings we need using the Section's custom CSS options instead.
To do so, go to:
Section Settings > Advanced > Custom CSS > Free-Form CSS
And add:
selector .et_pb_row {
display: flex;
flex-wrap: nowrap;
}
Like so:

Open your Page for Editing in the Visual Builder
Browse to the page you want to apply the change to. Then, in the WordPress admin bar at the top of the page, click the "Enable Visual Builder" button to open the page for editing in the Divi Builder.

Open the Specialty Section's Settings
Locate the specialty section you want to modify, or add it to your layout if you haven't already. Then, hover over the section to reveal the orange section buttons. If your Divi Builder is set to use "Click" mode, you may need to click on the section instead of hovering. Click the "Gear" icon to open the section's settings.

Set the Row to Flex mode using CSS
Now, click on the "Advanced" tab in the specialty section settings, then "Custom CSS". Under "Free-Form CSS", add the following CSS:
selector .et_pb_row {
display: flex;
flex-wrap: nowrap;
}

Save the Section Settings
To save the changes to the section, click the green check mark button at the bottom of the row settings.

Save the Page
When you are ready, save the whole page by opening the Page Settings toolbar, by clicking on the round purple "three-dots" button at the bottom of the visual builder are, and clicking on the "Save" button.

View the Result
Now take a look at your specialty section. The effect will depend slightly on the particular specialty layout you're using, but as an example, a specialty section with an image module and a two column row would normally display the two columns below the image on mobile. With our changes, the image and the Divi columns all line up side-by side.

Displaying multiple modules side-by-side in this way can lead to a tight fit on the narrow mobile devices, but you can use Divi's built in sizing and spacing options to adjust it to suit your design needs.
Conclusion
There we have it. Two ways to lay Divi columns out side-by-side. One that works on standard rows and one designed for rows embedded in specialty sections. I hope it helps, but please ask in the comments if you have any questions.
Hello,
Thanks and do you know for only side by side row on the second column on special section ?
Hey Greg, sorry I'm just responding now. Are you able to share a link to an example? There are quite a few possible combinations with the specialty sections and the answer will depend on how yours is set up. Thanks!
I followed the instructions and the sizes changed, but the modules are still stacked.
Hey George, are you able to share a link to the page you're working on so that I can take a look? You can sent it privately via the contact form if you wish. Thanks! Dan