Cómo invertir columnas en WordPress. ¡Sin plugins, solo con CSS!

Cómo invertir columnas en WordPress es algo con lo que la gran mayoría de webs se han encontrado más tarde o más temprano. Hasta hace un tiempo, había que hacer malabares para conseguirlo. Pero de unos años hacia aquí CSS ha avanzado mucho y ahora puede conseguirse fácilmente gracias a Flexbox y su propiedad flex-direction.

La estructura de dos o más columnas que con imágenes y texto intercaladas en horizontal, puede no ser tan fácil de consumir desde un móvil. O simplemente es que nos deja un orden que no nos gusta, nos rompe el diseño. Y queremos que nuestra web luzca tal como tenemos en mente. Por ello vamos a enseñarte a hacerlo.

Psst! Psst! Si lo que buscas es directamente el código que necesitas para copiar y pegar, haz clic aquí. Pero te recomiendo leer el artículo completo, te llevará 3-4 minutos y aprenderás mejor cómo funciona todo esto.

¿Qué es flex-direction y cómo nos ayuda a invertir columnas en WordPress?

Flex-direction es una propiedad CSS que controla la dirección en la que se distribuyen los elementos dentro de un contenedor flexible (flexbox). Esta propiedad es fundamental cuando necesitamos reorganizar el contenido de nuestra web, especialmente en diseños responsive.

La imagen que tenemos aquí arriba es bastante gráfica y puede ayudarte a comprender mejor los ejemplos que ponemos a continuación.

Valores principales de flex-direction:

1. row (valor por defecto):

• Los elementos se colocan en horizontal, de izquierda a derecha

   .contenedor {
       display: flex;
       flex-direction: row;
   }

2. row-reverse:

• Los elementos se colocan en horizontal, pero de derecha a izquierda

   .contenedor {
       display: flex;
       flex-direction: row-reverse;
   }

3. column:

• Los elementos se apilan verticalmente, de arriba a abajo

   .contenedor {
       display: flex;
       flex-direction: column;
   }

4. column-reverse:

• Los elementos se apilan verticalmente, pero de abajo hacia arriba

   .contenedor {
       display: flex;
       flex-direction: column-reverse;
   }

Cómo invertir columnas en móvil

Para invertir el orden de las columnas en dispositivos móviles, utilizaremos media queries junto con flex-direction. Este es el código que necesitas:

@media (max-width: 782px) {
    .columnas-invertidas-movil {
        flex-direction: column-reverse;
    }
}

Ejemplos prácticos para invertir columnas en WordPress

1. Invertir secciones de contenido y imagen

/* Primero, asegúrate de que el contenedor padre sea flex */
.wp-block-columns {
    display: flex;
}

/* Invierte las columnas en móvil */
@media (max-width: 782px) {
    .section-imagen-texto {
        flex-direction: column-reverse;
    }
}

2. Reorganizar sidebar y contenido principal

.content-sidebar-wrapper {
    display: flex;
    flex-direction: row; /* Desktop: sidebar a la derecha */
}

@media (max-width: 782px) {
    .content-sidebar-wrapper {
        flex-direction: column-reverse; /* Móvil: sidebar abajo */
    }
}

3. Reorganizar elementos en el footer

.footer-widgets {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

@media (max-width: 782px) {
    .footer-widgets {
        flex-direction: column-reverse;
    }
}

Implementación en WordPress

Para aplicar estos estilos en WordPress, tienes varias opciones que podrás hacer fácilmente:

1. Desde el Personalizador:
   • Ve a Apariencia > Personalizar
   • Selecciona «CSS adicional»
   • Pega el código CSS necesario
2. Desde tu tema hijo:
   • Añade el código en el archivo style.css de tu tema hijo
3. En bloques Gutenberg:
   • Añade un bloque HTML o un bloque de CSS personalizado
   • Incluye las clases necesarias en tus bloques de columnas

Si quieres leer un artículo donde damos alguna otra opción y profundizamos más en el tema dando más detalle en cada uno de los puntos, te recomendamos leer cómo usar CSS en WordPress.

Consideraciones importantes

• Asegúrate de que el contenedor padre tenga display: flex
• Prueba diferentes breakpoints según tu diseño (max-width: 782px es el estándar de WordPress)
• Verifica la compatibilidad con navegadores antiguos si es necesario

Invertir columnas en WordPress nunca había sido tan fácil gracias a flex-direction. Esta solución moderna nos permite crear diseños responsive sin necesidad de plugins adicionales, manteniendo nuestro sitio ligero y eficiente.

Vale, pero que me lo hagan

Si lo que prefieres es que hablemos para ayudarte a preparar tu web, hacerla con un buen código que te ayude con el SEO, cargue rápido y esté optimizada para posicionar en los primeros resultados, contacta con nosotros.