Cómo invertir el orden de las columnas en la visualización en móviles

Si alguna vez has utilizado columnas para insertar imagen y texto de manera alterna en distintas secciones de tu web ya sabes que, al visualizarlas desde un dispositivo móvil no pasa lo que esperabas.

El feo problema

Lo que esperarías es que, si en las primeras columnas hay una imagen a la izquierda y texto a la derecha, y en las siguientes justo lo contrario, texto a la izquierda e imagen a la derecha, al verlas desde un móvil vieses algo como imagen > texto > imagen > texto.

Vamos, algo que en un ordenador se ve genial.

Pero no, lo que tienes es imagen > texto > texto > imagen.

Esto es así porque en realidad, la secuencia natural de las columnas es justo esa: has puesto una imagen, luego un texto, luego otro texto y luego otra imagen, viendo de izquierda a derecha, como hacemos todos en el mundo occidental y/o idiomas que no sean RTL.

Así que, en un dispositivo móvil lo verás así:

La diferencia la puedes apreciar claramente en el siguiente breve vídeo…

La(s) solución(es)

Como este problema se da mucho,  y la solución depende del editor que utilices, vamos a ver cómo arreglarlo según la situación.

Columnas en orden inverso en móviles con el editor de bloques de WordPress

Para solucionar esto vamos a valernos de la magia del CSS, como muchas otras veces. En este caso, veremos que tenemos que dar 2 pasos.

Lo primero es crear una clase CSS que invierta el orden de las columnas cuando estas se vean en un dispositivo móvil.

Podemos hacerlo desde el personalizador de WordPress, en Apariencia -> Personalizar, añadiendo esto:

/* Invertir orden columnas editor en movil */
@media all and (min-width: 767px) {
  .fila-inversa {
    display: flex !important;
    flex-flow: wrap;
    flex-direction: row-reverse;
  }
}

Una vez guardados los cambios, en el editor de WordPress, selecciona el segundo bloque de columnas y, en la sección «Avanzado -> Clase(s) CSS adicional(es)» de la barra lateral de ajustes del bloque añade lo siguiente:

fila-inversa

Y conseguirás que, ahora sí, se vean igual en móviles que en ordenadores de escritorio, más anchos, en cualquiera cuyo ancho de pantalla sea superior a los 767 píxeles indicados en el código CSS.

Y ya, por fin, se verá también en móviles como esperarías…

Columnas en orden inverso en móviles con Divi

Divi, como en casi todo, funciona algo diferente y, aunque puedes ir columna a columna de cada sección haciendo cambios en el orden, lo ideal es que apliques una solución que valga para todas las columnas ¿no?

Y es sencillo, solo es 1 paso.

Ve a Apariencia -> Personalizar -> CSS Adicional y añade el siguiente código:

@media all and (max-width: 980px) {
.custom_row {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap; /* Safari 6.1+ */
flex-wrap: wrap;
}
.first-on-mobile {
-webkit-order: 1;
order: 1;
}
.second-on-mobile {
-webkit-order: 2;
order: 2;
}
.third-on-mobile {
-webkit-order: 3;
order: 3;
}
.fourth-on-mobile {
-webkit-order: 4;
order: 4;
}
.custom_row:last-child .et_pb_column:last-child {
margin-bottom: 30px;
}

}

Con esto tendrás todas las columnas de tus secciones Divi siempre en orden alterno en dispositivos móviles, lo ideal.

Si prefieres hacerlo manualmente en cada ocasión, la estrategia es más manual, tendrías que duplicar la primera fila, poner un orden para que se vea en escritorio de un modo y en la duplicada, ponerla solo para móviles en otro orden.

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(5 votos, promedio: 5)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

4 comentarios en “Cómo invertir el orden de las columnas en la visualización en móviles”

  1. Hola Fernando, soy neófito en WP, pero con muchas ganas de aprender. Acabo de descubrir tu sitio y la verdad es que arroja mucha luz. Al igual que Carlos, trabajo con Elementor (y Astra) y el hecho de que se descuadren en el celular las fotos/textos es un gran incordio. Estaría genial poder solucionarlo.

Deja un comentario

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

 

Ir arriba Ir al contenido