Invertir columnas en Visual Composer para dispositivos móviles

Uno de los problemas que nos encontramos cuando trabajamos con columnas en Visual Composer, archiconocido plugin de WordPress para maquetar páginas, es que a veces nuestra maqueta necesita invertirlas en dispositivos móviles para que la visualización del contenido sea coherente.

Imagina que tienes una estructura de contenido de varias filas y dentro de cada una la hemos dividido en dos columnas. En una de ella ubicamos una foto y en la otra un texto, pero en la siguiente fila, para hacer la lectura más atractiva, decidimos invertir las posiciones. Cuando entramos a resoluciones grandes nuestro diseño se lee sin problemas, sin embargo a resoluciones pequeñas, las columnas se posicionan una encima de la otra siguiendo el orden natural y dando como resultado que entre fila y fila, las fotos y los textos aparecen pareados, lo que provoca confusión en el lector.

Lo ideal sería que cada fila par o impar, invirtiera sus columnas al entrar desde resoluciones pequeñas. Sin embargo Visual Composer, a diferencia de otros maquetadores visuales, no dispone de una opción que nos permita hacerlo. No obstante, si tienes conocimientos de CSS, podemos solucionar esta carencia de un modo muy sencillo.

Iremos al archivo CSS de nuestro tema y crearemos una nueva clase, que llamaremos como nosotros queramos, intentando claro, que no coincida con una ya existente. Visual Composer usa la propiedad flex-direction:column; para posicionar las columnas. Nosotros podemos usar esta propiedad a nuestro favor cambiando el valor por column-reverse, el cual invertirá el orden de las columnas. Para que esto funcione solo a resoluciones pequeñas como los dispositivos móviles, introduciremos nuestra nueva clase dentro de una regla de medios para que solo esté activa hasta cierta resolución de pantalla, como pudimos ver en el artículo sobre cómo ocultar o mostrar capas con CSS dependiendo de la resolución.

@media only screen and (max-width:481px) {
	.columnas-invertir{
		flex-direction:column-reverse;
	}
}

Por último, nos iremos a la página donde tenemos nuestra maqueta. Editaremos las propiedades del bloque que contiene las columnas a invertir y añadiremos nuestra nueva clase.