Search

How to Reverse Column on Mobile Device in Divi

A typical two-column layout on a desktop might have the image on the right and the content on the left. However, the order might be better reversed for mobile devices, so the content appears above the image. Reversing the column order can make the website easier to navigate on mobile devices. By placing the content first, users can quickly see what the website is about and decide whether or not to continue scrolling to view additional content. This can help to reduce bounce rates and improve user engagement, as users are more likely to stay on the website if they can easily find what they are looking for.

A reversed column on the mobile device is even more important if you have the content in an alternate manner. For instance, a layout with image content then content image and no apparent separator between rows like follows.

Desktop

On mobile devices, you’ll most likely end up with a layout similar to follows, which is bad for user experience.

Mobile

In Divi, you can’t have reversed column layout for different devices by default. However, with this tutorial, we will show you how to reverse the desired column on the mobile device.

Reverse Column on Mobile Device

Step 1: Add a Custom CSS to your Desired Column

Firstly, edit your page with Divi Builder then open up the Row Settings of your desired row.

Continue by navigating to the Advanced tab CSS ID & Classes block, and add reverse to the CSS Class field.

Step 2: Add a Custom CSS Snippet

The next step is to add a custom CSS to reverse the column with the CSS class you’ve added before. Now, from your WordPress dashboard, navigate to Divi Theme Options General tab and then copy the following CSS snippet to the Custom CSS editor.

@media screen and (max-width: 980px){
    .reverse{
        display:flex;
        flex-direction: column-reverse;
    }
}

The above snippet will reverse the column with reverse CSS class on the device with maximum 980px display width.

Once you’ve added the snippet, save the changes by clicking on the Save Changes button.

Now, you’ll find the desired column is reversed and well-positioned for the layout on mobile devices.

The Bottom Line

Reversing the column order can make the website easier to navigate on mobile devices and even more so to an alternate image-content layout. This is because mobile devices typically have narrower screens, and you’ll end up with an awkward layout. And to fix that, you may want to reverse the column. This tutorial shows you how to reverse columns on a mobile device view using a CSS snippet. To streamline your workflow, you can save the snippet to Divi Cloud so that you can access it from all websites you build with Divi.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Picture of Hendri Risman

Hendri Risman

Hendri is a WordPress expert and a writer staff at WPPagebuilders. He writes solutions on how to get things fixed in WordPress a lot. Mostly without involving a plugin.
Want to save yearly expense up to $219? why not?

Leave a Comment

Save your Divi assets to the cloud and access them from anywhere.