Cambiar el Orden de las Columnas SOLO en MOVIL (Divi + WordPress)

Te enseño ajustes responsive para que cambies el orden de las columnas en Divi de modo que tu página se ve perfectamente como quieres en la versión móvil y escritorio.
27/10/2023

Conozco tu situación. Has diseñado una web que se ve genial en ordenador, con un efecto perfecto en la vista del usuario, sin embargo, cuando vas al teléfono, el orden no favorece a la navegación ni muestra el contenido como desearías, y no quieres tener que cambiar la versión en ordenador.

No te preocupes, yo te enseño a escoger el orden de las columnas de las filas de Divi según tus preferencias de forma fácil, sin plugins y sin tener que sacrificar contenidos ni nada de nada.

Dos códigos CSS simples, de tres lineas en total son suficiente.

Vista desde el punto de vista de todos los dispositivos

A continuación te muestro como se ve el primer diseño en escritorio, y luego cómo se ve en el teléfono, primero de forma errónea, cuando no hacemos nada, y segundo, de forma correcta cuando aplicamos la solución de este artículo.

Vista en Escritorio

vista columnas escritorio

Vista en el Móvil (antes de arreglar)

vista movil mal

Vista en el móvil (ARREGLADA)

vista movil bien

Tutorial paso a paso para elegir el orden de las columnas en cada dispositivo en DIVI

Bien, te muestro la solución. Quizás te parezca un poco raro y lioso de primeras, pero si lees con detenimiento este artículo, te garantizo que lo vas a entender a la primera.

A modo de resumen te cuento qué vamos a hacer:

  1. Vamos a convertir la fila en FLEX, una propiedad CSS, gracias a ella podemos elegir qué caja (columna en este caso) mostrar primero y cuál después.
  2. Vamos a decirle a la columna que está en la imagen que se muestre la última EN CASO de estar en un dispositivo móvil.

Parece sencillo, ¿no?

¡Pues sí! ¡Vamos a ello!

Paso 1: Convertir la FILA en Flexbox (o flex)

Lo primero será modificar la FILA, lo que en Divi vemos de color verde claro.

fila divi

En la fila nos vamos a ir a Avanzado, y de ahí a CSS personalizado. Tras la última actualización hay dos pestañas, nos vamos a la de la derecha, elementos del módulo, y en elemento principal pegamos este código:

display:flex;

flex-flow: row wrap;

modificar fila

Hecho esto nos vamos a Contenido, y nos vamos a modificar la columna que tiene la imagen

modificar columna imagen

Dentro de modificar el estilo de la columna, nos vamos a avanzado, CSS personalizado, elementos del módulo, y seleccionamos las opciones responsive y le damos a la opción del teléfono, y allí le pondremos el código:

order:999;

ajustes responsive

OJO: fíjate que estás haciéndolo solo en el móvil (punto 5 de la imagen)

ajustes columna con imagen

¡Listo! Tu columna se ve en orden correcto en el escritorio y en el orden correcto en el móvil.

Puedes jugar con esto y mostrar lo que te convenga en cada momento.

Repetir los pasos para cada fila

Lo que lees en este titulito, esto que has aprendido habrá que hacerlo en cada fila que quieras que tenga estas características.

Resultado final

Este es el resultado final. En ordenador se ven filas escalonadas, y en el teléfono, ordenadas.

En el ordenador

vista columnas escritorio

En el teléfono

vista movil bien
Roberto M
Consultor Experto en Marketing Digital especializado en SEO y Diseño Web. Impulsa tu negocio con estrategias efectivas y resultados comprobados. Maximiza tu presencia digital y alcanza tus metas aprovechando su experiencia.
¿Necesitas ayuda con tu proyecto?
¡Trabajemos juntos!

Estás a un email de distancia de multiplicar tu negocio.

Contáctame

Comparte este artículo

Artículos relacionados

Cómo Añadir Paginación al Blog de Divi

En mi experiencia como consultor de Diseño Web y de Posicionamiento SEO he podido ver uno de los talones de Aquiles de Divi, la forma de mostrar y previsualizar entradas en su blog. Y una de las cosas que más me frustraba ha sido ver que no hay forma humana de poner...

Cómo hacer una Tabla HTML Responsive (con HTML y CSS) y sin plugins

Consigue una tabla para tu sitio (Wordpress y Divi inclusive) En este artículo te voy a enseñar cómo hacer una tabla responsive que funciona muy bien, en cualquier sitio, incluidos Wordpress, Divi, Elemento o cualquier otro tema o constructor. Solo vas a necesitar un...