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

There’s nothing much needed to reserve the order of columns. All you have to do is follow the steps and use the below custom 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 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.
Posted By:
Karan
Karan loves making web beautiful with his keen eyes toward design.

0 Comments

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.

0 Comments

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.

Divi Flexile Footers – A pack of Ultimate Divi Footers

Divi Flexile Footers – A pack of Ultimate Divi Footers

Footers provide users with a lot of useful information, whether it is the footer menu, short info about the business, or social icons. You can use a Divi footer to emphasize your website’s bottom area for better user interaction and get multiple goals fulfilled, such...

How to add an Ajax Add to Cart button to Shop module in Divi

How to add an Ajax Add to Cart button to Shop module in Divi

By default, when you insert the shop module in the Divi theme, you don't get any add to cart button. The shop module only displays products with pricing, sale tag (if the products are on sale), and a sorting filter, but no "Add to Cart." However, you've probably seen...

Divi Flexile Headers – A pack of Ultimate Divi Headers

Divi Flexile Headers – A pack of Ultimate Divi Headers

Headers are an essential part of a website. From assisting users navigating the site pages to pages to bring leads to a business, headers play a key role. And with the Divi headers available in the Divi Flexile Headers, you’ll be able to enhance this role in doubles....