Jun 17, 2020 | Divi Resources

How to reverse Divi column order on mobile devices

If a page on your Divi theme based website contains content in a random manner, i.e., Image-Text in the first column, and Text-Image in the 2nd column, there will be some design issue with the mobile view. It would look great on the desktop screens, but on mobile, your content will be displayed as a straight Image, Text, Text, Image just like the below picture, which is disturbing in many ways.

Divi reverse columns on mobile
View on desktop with image on left and content on right in first row and reversed on next row.

Now, the problem

The same layout as seen on a mobile where the second shows content first and then the image.

However, this isn’t a permanent problem because Divi always provides an easy solution to create a better website. And it’s the same in this case, too. Follow the below steps to achieve a perfect design view for any resolution devices.

Let’s get started!

Reverse Stacking of Columns’ Order in the Divi Theme for Mobile Devices

Reversing column on mobile in Divi can be done easily. If you want to reverse order of 2 columns, here are the steps with the required CSS

The wireframe mode shows the structure of the page and the row (second) where we will add a CSS class.
  1. Go to advanced settings of your Row, whose content you want to see reversed on mobile devices.
  2. Then in the CSS Class input field of CSS ID & Classes setting, enter the class name reverse.
  3. After this on your WordPress dashboard, go to Divi >> scroll to the Custom CSS section, and add the below custom CSS.
Reverse CSS
@media screen and ( max-width: 980px ) {
    .reverse {
        display: flex;
        flex-direction: column-reverse;
    }
} 

You can also make your Divi columns reverse on mobile by adding this custom CSS in your style.css file. However, when you add custom CSS in style.css, we recommend that you add that in the child theme file. If somehow, after applying this custom CSS, your columns haven’t reversed or alternated the content view, then make sure you have added the correct class name inside both the row and style.css.

Result:

The layout now as seen on on mobile devices shows the elements of the second column first.

Do you want to add 50+ new modules to your Divi Theme?

Hope you find this article helpful. Before you go, we would like to introduce you to Divi Plus, our multipurpose plugin that comes with some great features you might like.

Divi Plus Divi Web Design Tool
Posted By:
Karan
Karan loves making web beautiful with his keen eyes toward design.

2 Comments

  1. Jornes

    Thank you for this article! This is exactly what I am looking for. It helps solving my concern on my website. Thanks again!

    Reply
  2. Damian

    Wow!!! A really great solution. No more duplicate row and hide it on mobile… haha

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

2 Comments

  1. Jornes

    Thank you for this article! This is exactly what I am looking for. It helps solving my concern on my website. Thanks again!

    Reply
  2. Damian

    Wow!!! A really great solution. No more duplicate row and hide it on mobile… haha

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

15 Best eCommerce Website Builders to Use in 2021

15 Best eCommerce Website Builders to Use in 2021

If you’re here, then it would be wrong to say that you’ve not ever interacted with an eCommerce platform. Most of the people living today, once in their lifetime, have come across an eCommerce platform and interacted with it. Because according to an Inviqa report it’s...

Using Divi for RTL Website? Here Are 3 Things You Need To Know

Using Divi for RTL Website? Here Are 3 Things You Need To Know

Running a website for the business is one of the crucial aspects of running a business in today’s time. Whether you’re manufacturing fashion apparel or designing web projects, an online platform is always a plus. Based on this, more and more businesses are adopting...

An Amazing Guide on Divi Scroll Effects & How to Use Them Creatively

An Amazing Guide on Divi Scroll Effects & How to Use Them Creatively

Divi Scroll Effects are a great way to turn a simple Divi website into a modern one. And not only modern but highly interactive with enhanced engagement for different areas of the site. You could highlight CTAs, content sections and hook users to the purpose you've...

Popular on Divi Extended

Divi Plus Divi Child Theme Divi Header Layouts