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 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: 

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:

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.