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?

Anto Fernandez

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.

orden columnas

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.

 

¡Apuntate a nuestra lista!

Los mejores trucos y tutoriales para Divi y WordPress en tu bandeja de entrada

Join our list!

The best tricks and tutorials about Divi in your inbox

On our shop

En nuestra tienda

Suscribe

The best tricks and tutorials about Divi in your inbox

Apúntate a nuestra lista

Los mejores trucos y tutoriales para Divi en tu email

También te podría gustar:

You may also like

Text over image in DIVI

Text over image in DIVI

Today we want to share with you an interesting hack to improve the legibility of the images that have a text over it in Divi. This tutorial is in our  Divi Basics and has been written for users that have just begun in Divi. Nevertheless we can tell you that there...

Full Height Section in DIVI

Full Height Section in DIVI

How do I create a section that fills the total height of the screen (full screen) in DIVI? In this post we are going to show you how to create the sections that occupy the entire height of the screen. This is ideal for creating more visual webs, powerful call to...

Responsive Font in DIVI

Responsive Font in DIVI

Responsive fonts in DIVI? Is that even possible? YES!!!! What is more, you can do it with any font type! So today we would like to tell you a bit about the Divi responsive font. We will show you how to adapt the font size to your screen, no matter if you look at the...

How to change the color of menu’s links in Divi

How to change the color of menu’s links in Divi

Divi is a popular WordPress theme that comes with a powerful page builder and a wide range of customization options. But it has some limitations and sometimes we need to add CSS code. In fact, we can edit from the back office the color's link, font-size, lettering...

0 Comments

Submit a Comment

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

Select currency
Euro
$ United States (US) dollar

Get 5€ Off now!

Register now and get free coupon code.

 Register Now