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

Si llevas un tiempo trabajando con Divi, seguro ya te topaste con este problema: diseñas una fila con dos columnas, pones el texto a la izquierda y la imagen a la derecha, y cuando revisas en móvil aparece primero la imagen y después el texto. Divi apila las columnas de izquierda a derecha por defecto, lo cual tiene sentido en desktop pero en muchos diseños rompe por completo la jerarquía visual en pantallas pequeñas. La buena noticia es que cambiar el orden de las columnas en móvil en Divi no requiere ningún plugin — se resuelve con dos reglas CSS y listo.

En este tutorial te muestro exactamente cómo hacerlo: primero el video con el paso a paso completo, y después el desarrollo escrito para que tengas la referencia cuando lo necesites.

¿Por qué Divi apila las columnas en ese orden?

Divi convierte cada fila en un contenedor con sus columnas apiladas verticalmente en móvil. El orden que usa de forma predeterminada es el mismo que tienen en el HTML: de izquierda a derecha, de arriba a abajo. Si tu columna izquierda contiene una imagen y la derecha el texto, en móvil verás primero la imagen. No hay nada malo con eso técnicamente, pero muchas veces el diseño funciona mejor si el texto aparece primero — especialmente cuando la imagen es decorativa y el copy es el protagonista.

La solución es flexbox. Divi ya usa flexbox internamente en algunos contextos, pero para controlar el orden de apilado en móvil necesitas añadir las reglas tú mismo en el CSS personalizado de la fila y de cada columna. No hay opción nativa en el panel de Divi para esto — al menos en la versión actual — así que CSS es el camino más limpio y directo.

Paso 1: activar flexbox en la fila

El primer paso es convertir el contenedor de la fila en un contenedor flex con la posibilidad de que sus hijos (las columnas) cambien de posición. Para eso, abre la configuración de la fila donde quieres reordenar las columnas, ve a Avanzado → CSS personalizado → Elemento principal y agrega esto:

display: flex;
flex-wrap: wrap;

La propiedad display: flex activa el modelo flexbox sobre el contenedor. La propiedad flex-wrap: wrap permite que las columnas se envuelvan y apilen cuando el espacio no alcanza — que es exactamente lo que pasa en móvil. Sin flex-wrap: wrap las columnas intentarían mantenerse en la misma fila y se encogerían de forma incontrolable.

Consejo: El CSS personalizado de «Elemento principal» se aplica al contenedor .et_pb_row, no a cada columna. Asegúrate de estar en la pestaña correcta dentro de Avanzado — si lo pegas en el lugar equivocado, no va a funcionar.

Con esta regla en la fila ya tienes el contexto flexbox listo. Ahora puedes asignarle un número de orden a cada columna.

Paso 2: asignar el orden a cada columna

Una vez que la fila tiene flexbox activo, entra en la configuración de cada columna de forma individual: Avanzado → CSS personalizado → Elemento principal y agrega la propiedad order con el número que corresponda.

Si tienes dos columnas y quieres que en móvil la segunda aparezca primero:

/* Columna izquierda (la que quieres que aparezca segunda en móvil) */
order: 2;

/* Columna derecha (la que quieres que aparezca primera en móvil) */
order: 1;

Flexbox ordena los elementos de menor a mayor valor de order. El número en sí no importa — lo que importa es la relación entre ellos. Puedes usar 1 y 2, o 10 y 20, o cualquier entero positivo. Yo prefiero usar 1, 2, 3… para mantenerlo simple.

Consejo: Si no asignas order a una columna, su valor por defecto es 0, lo que significa que aparecerá antes que cualquier columna con order: 1 o mayor. Si solo asignas orden a una columna y no a las demás, es probable que el resultado no sea el que esperas.

Casos de uso comunes donde esto importa

La técnica aplica a cualquier número de columnas: 2, 3, 4 o más. Estos son los escenarios donde más lo uso en proyectos reales:

Si quieres ver la lógica de columnas responsivas más a fondo, tengo un tutorial sobre cómo crear un blog completo en Divi donde el manejo del layout en distintos breakpoints es parte central del flujo.

🎓 ¿Quieres dominar el diseño responsivo en Divi de forma sistemática?
En uxdivi.com/cursos tenemos contenido premium donde cubrimos el responsive workflow completo: breakpoints, columnas, tipografía fluida y los trucos CSS que no están en la documentación oficial de Divi. Accede como suscriptor y aplícalo desde el primer módulo.

Errores comunes al aplicar esta técnica

La técnica es simple, pero hay dos puntos donde la mayoría falla la primera vez:

Pegar el CSS en el lugar equivocado. Tanto la fila como cada columna tienen varias opciones dentro de CSS personalizado: Elemento principal, Antes, Después, etc. El display: flex va en el Elemento principal de la fila. El order va en el Elemento principal de cada columna. Si lo pegas en «Antes» o «Después», el CSS se genera en un pseudo-elemento y no afecta al contenedor real.

No asignar order a todas las columnas. Como el valor por defecto de order es 0, si solo le asignas order: 2 a la columna izquierda y no le asignas nada a la derecha, la columna derecha tendrá implícitamente order: 0 y va a aparecer primero — que es el comportamiento correcto, pero si después añades una tercera columna sin asignarle orden también va a quedar en 0 y el resultado puede ser inesperado. Mi práctica es siempre asignar order explícitamente a todas las columnas que participan en la fila.

Olvidar que el CSS aplica en todos los breakpoints. El CSS personalizado del constructor de Divi no tiene condición de breakpoint por defecto — aplica en desktop, tablet y móvil. Si quieres que el reorden solo ocurra en móvil y no en desktop, tienes que añadir una media query dentro del CSS personalizado del módulo, o bien usar el campo de CSS en un recurso global como el Child Theme o un mu-plugin. Para la mayoría de los casos el reorden en todos los breakpoints no causa problemas, pero si tu diseño desktop depende de un orden específico y el CSS lo altera, es el punto donde hay que agregar la media query.

Consejo: Si solo quieres el reorden en móvil, envuelve las reglas de la fila y columnas en @media (max-width: 767px) { }. Divi usa 767px como breakpoint de móvil, así que ese valor es seguro para esta técnica.

¿Funciona igual en Divi 5?

Sí. El CSS personalizado de fila y columna sigue existiendo en Divi 5 en la misma ubicación (Avanzado → CSS personalizado → Elemento principal), y flexbox funciona de la misma manera. La única diferencia es que el Visual Builder de Divi 5 tiene más opciones nativas de layout — pero para reordenar columnas en móvil, el método con order sigue siendo la forma más directa. Si usas Divi 4, la técnica es idéntica.

Para quienes están en proceso de migración, si tu sitio todavía corre en Divi 4 y estás trabajando en un rediseño, puedes aplicar esta técnica hoy en Divi 4 y la vas a trasladar a Divi 5 sin cambios — el CSS es el mismo.

Recomendaciones antes de cerrar

1. Prueba el resultado en el dispositivo real, no solo en el simulador del navegador. El simulador es útil pero no siempre refleja cómo se ve en un iPhone o Android real. Para eso también puedes apoyarte en herramientas de prueba de diseño responsivo que amplían las opciones de verificación más allá del inspector del navegador.
2. Revisa en tablet también. A veces el reorden que quieres en móvil no tiene sentido en tablet — ahí es donde la media query de 767px ayuda a limitar el efecto.
3. Si tu fila tiene más de tres columnas, define el orden de todas antes de publicar. Dejar alguna sin order explícito es la causa más común de comportamientos raros.
4. Documenta el CSS en algún lugar del proyecto. Si en seis meses tienes que editar la fila o alguien más toca el sitio, es fácil olvidar que esas reglas existen.

Si manejas tiendas WooCommerce con Divi, esta técnica aplica igual para reordenar columnas en páginas de producto o en la tienda — y se combina muy bien con el tutorial de cómo crear el botón de añadir al carrito con Divi, donde el layout de la ficha de producto también entra en juego.

Preguntas frecuentes

¿Necesito un plugin adicional para reordenar las columnas en móvil en Divi?

No. La técnica usa solo CSS nativo (flexbox + la propiedad order) que pegas directamente en el CSS personalizado del constructor de Divi. No hace falta instalar nada adicional.

¿Afecta esto al orden de las columnas en desktop?

Si pegas el CSS sin una media query, sí — aplica a todos los breakpoints. Si quieres que el reorden solo ocurra en móvil, envuelve las reglas en @media (max-width: 767px) { }. En la mayoría de los diseños donde reordenas columnas, el efecto en desktop también es el que quieres, pero depende de cada caso.

¿Funciona con más de dos columnas?

Sí, funciona con 2, 3, 4, 5 y 6 columnas. Solo necesitas asignar un número de order a cada columna: la que tenga order: 1 aparecerá primero, la de order: 2 segunda, y así sucesivamente.

¿Por qué no simplemente duplicar la columna y ocultar la original en móvil?

Es un workaround que mucha gente usa, pero tiene desventajas: duplicas el HTML (dos veces el mismo contenido en el DOM), lo que puede afectar el SEO y el tiempo de carga. Con la propiedad order usas el mismo elemento y solo cambias su posición visual — sin contenido duplicado.

Conclusión

Reordenar columnas en móvil en Divi es uno de esos problemas que parece complicado hasta que sabes que son dos reglas CSS: display: flex; flex-wrap: wrap; en la fila y order: N; en cada columna. Una vez que lo aplicaste una vez, lo tienes para siempre en tu caja de herramientas. El próximo diseño donde la jerarquía visual en móvil no cuadre, ya sabes exactamente adónde ir.

🎓 ¿Quieres aprender a construir layouts avanzados en Divi con criterio profesional?
En uxdivi.com/cursos cubrimos el diseño responsivo en profundidad: breakpoints, tipografía fluida, orden de columnas, y todo el CSS que Divi no expone de forma nativa. Accede como suscriptor y construye sitios que se ven bien en cualquier pantalla.