Blog

How to change the order of the Divi’s columns in mobile?

How to change the order of the Divi’s columns in mobile?

Destaca Imagen

Divi is a fantastic builder with a few options to create any website. At times it is also necessary to use CSS if we want to achieve the best results. In the example of this post we are going to change the order of the divi columns in mobile device.

As we can see in these images if we use this layout when we view the website in a mobile device the result is this one:

Change columns order in divi

How can we change the order of the columns in a mobile?

We need some of CSS. Firstly we have to add an extra class in the row that we want to change the column’s order. We use the class “reverse”. Them we add this code in the WordPress custom appearance:

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

Here is a video with all the process

It’s easy, Isn’t it? We hope you can use this tutorial in your projects. Please leave a comment if you have used this snippet in some Divi projects.

About Destaca Imagen

CHEMA & ANTO

We are brothers. As a designer and developer, we have decided have to join forces  to create plugins and themes for WordPress.

 

Products

45€. Create awesome masonry galleries in Divi. With category filter and pagination. More info

55€. A clean, minimalist and powerful theme to show the world your photos More info

Suscríbete

Los mejores trucos y tutoriales para Divi en tu email

Suscribe

The best tricks and tutorials about Divi in your inbox

0 Comments

Submit a Comment

Your email address will not be published.

Get 5€ Off now!

Register now and get free coupon code.

 Register Now