Blog

Cambiar el orden de las columnas de Divi en móvil

Cambiar el orden de las columnas de Divi en móvil

Anto Fernandez

Divi es un constructor genial con un montón de opciones disponibles que nos va a permitir trabajar en cualquier proyecto web. Pero en ocasiones es necesario utilizar algo de CSS si queremos conseguir el mejor resultado. En el ejemplo de este post vamos a ver como cambiar el orden de las columnas de Divi en móvil. ¿Porque es necesario esto? He aquí el problema:

orden columnas

Como vemos en estas imágenes si utilizamos esta composición al visualizar la web en móvil o en tablet el resultado es el siguiente:

Change columns order in divi

¿Cómo cambiamos el orden de las columnas en móvil?

Vamos a necesitar un poco de CSS. Primero tendremos que añadir una clase extra a la fila a donde queremos cambiar el orden de las columnas. Utilizaremos la clase “reverse”. Luego añadiremos este código CSS en el apartado de personalizar apariencia de WordPress:

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

Aquí tenéis un vídeo con todo el proceso:

¿Qué te ha parecido? Esperamos que te sea fácil y que los puedas utilizar en tus proyectos. Déjanos un comentario si has utilizado este código en algunos de tus proyectos Divi.

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

Sección altura completo en Divi

Sección altura completo en Divi

¿Cómo creo una sección que ocupe el alto total de mi pantalla (Full Screen) en Divi? En este post te vamos enseñar cómo crear secciones que ocupen 100% de la altura de tu pantalla. Ideal para crear webs muy visuales, landing con call to action potentes y páginas webs...

Fuente responsive en Divi

Fuente responsive en Divi

¿Fuentes responsive en Divi? ¿Es posible? YES!! Además con cualquier tipografía. Hoy te queremos hablar de fuente responsive en Divi. Vamos a ver cómo podemos adaptarla al tamaño de nuestra pantalla. Tanto si el usuario ve la web desde diferentes dispositivos o reduce...

Texto sobre imagen en Divi

Texto sobre imagen en Divi

Hoy queremos compartir contigo un pequeño truco para mejorar la legibilidad de las imágenes que tienen un texto sobre cualquier imagen en Divi. Este tutorial está en nuestra categoría Divi Basics y está escrito para usuarios que están comenzando con Divi. Aunque te...

Cambiar el color de los enlaces del menú de Divi

Cambiar el color de los enlaces del menú de Divi

Todos sabemos que Divi es un tema de Wordpress muy potente y versátil. Con un montón de opciones de personalización. Pero en muchas ocasiones es necesario usar CSS para ciertos detalles importantes. Esto ocurre por ejemplo con los enlaces del menú. Podemos cambiar el...

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Select currency
Euro
$ Dólar de los Estados Unidos (US)

¡Consigue 5€ gratis!

Regístrate y obtén un cupón descuento.

 Registrarme