En escritorio, las columnas se muestran correctamente: texto a la izquierda, imagen a la derecha. Abra el sitio en un teléfono y la imagen aparece primero mientras la explicación se desliza hacia abajo, fuera de la vista inicial.

¿Le suena familiar? La razón es que en dispositivos móviles toda la maquetación colapsa en una sola columna y el orden de los bloques permanece fijo: lo que aparezca primero en el HTML se muestra arriba. Nadie quiere modificar el HTML solo para el móvil: eso implica duplicar secciones o usar soluciones poco ortodoxas con display: none.

CSS ofrece una herramienta que resuelve este problema sin modificar el marcado: la propiedad order combinada con flexbox. Una línea en una media query y los bloques intercambian sus posiciones.

💡 Resumen rápido:

• Cómo controla flexbox el orden de los bloques sin cambiar el HTML
• Código CSS para intercambiar dos columnas en móvil
• Cómo aplicar clases mediante un constructor de páginas (usando King Composer como ejemplo)
• Un fragmento listo para usar: cópielo, sustituya sus clases, pruébelo

Cómo funciona order en CSS: lo esencial

Flexbox hace más que solo alinear elementos horizontal y verticalmente. Cada elemento flex tiene una propiedad numérica order que determina su posición visual independientemente de su lugar en el HTML.

Por defecto, todos los elementos tienen order: 0, por lo que aparecen en el orden en que están escritos en el código. Pero en cuanto asigna order: 1 a un bloque y order: 2 a otro, el navegador los reorganiza. El número más bajo siempre va primero.

La parte más útil: order funciona dentro de una media query. En escritorio, los bloques permanecen en sus posiciones normales, pero en pantallas de menos de 768px de ancho intercambian sus lugares. Mientras tanto, el HTML permanece intacto, los motores de búsqueda ven el orden original y la accesibilidad no se ve afectada. MDN lo confirma: el orden visual cambia, pero el orden de tabulación no (siempre que no modifique tabindex).

Tenga en cuenta que order solo funciona dentro de un contenedor flex. El bloque padre debe tener display: flex o display: inline-flex. Sin esto, la propiedad order se ignora.

Desglose paso a paso: aplicar order en la práctica

Considere una sección típica: dos columnas en una fila en escritorio, apiladas en móvil. El objetivo: en teléfonos, la segunda columna (imagen) debe aparecer PRIMERO, y la primera columna (texto) debe aparecer después.

Paso 1: preparar la estructura HTML

El marcado básico consiste en un contenedor padre y dos bloques hijos. El orden en HTML: primero el texto, luego la imagen. Esta es exactamente la estructura que generan la mayoría de los constructores de páginas, incluido King Composer.

1
<div class="section-wrapper">
2
  <div class="block-text">Текст и пояснение слева</div>
3
  <div class="block-image">Картинка справа</div>
4
</div>

Paso 2: escribir el CSS

Primero, convierta el contenedor en un contenedor flex en todas las resoluciones. Luego, en la media query para móvil, asigne a cada bloque su propio order y estírelos al ancho completo.

Añada este código en Escritorio → Apariencia → Personalizar → CSS adicional en su tema o mediante el plugin Code Snippets. No edite los archivos del tema directamente, porque sus estilos se perderán al actualizar.

1
.section-wrapper {
2
    display: flex;
3
    flex-flow: wrap;
4
}
5
 
6
@media screen and (max-width: 767px) {
7
    .block-image {
8
        order: 1;
9
        width: 100%;
10
    }
11
 
12
    .block-text {
13
        order: 2;
14
        width: 100%;
15
    }
16
}

Desglose: en escritorio, ambos bloques son elementos flex normales con order: 0 (el valor por defecto según la especificación). Texto a la izquierda, imagen a la derecha, como en el HTML. En pantallas de menos de 768px, la media query se activa: .block-image recibe order: 1, moviéndolo al primer lugar; .block-text recibe order: 2, colocándolo en segundo lugar. width: 100% asegura que los bloques ocupen todo el ancho de la pantalla horizontalmente.

Punto clave: las clases .block-text y .block-image son nombres propios. En un proyecto real, usará las clases que genere su constructor de páginas o tema.

Paso 3: cómo asignar clases en un constructor de páginas

Enfoque universal: cualquier constructor visual (Elementor, Bricks, el antiguo King Composer, Gutenberg nativo mediante grupo) le permite añadir una clase CSS personalizada a secciones y columnas. Las capturas de pantalla a continuación muestran el proceso en la interfaz de King Composer, pero la lógica es la misma en todos: busque el campo "Clase CSS" o "Clase extra" en los ajustes de fila/columna e introduzca el nombre deseado.

Una sección de dos columnas en King Composer se ve así:

Asigne la clase section-wrapper al contenedor padre (la fila):

Asigne la clase block-text a la columna izquierda:

Asigne la clase block-image a la columna derecha:

Después de guardar y publicar, compruebe la página en un teléfono o mediante las DevTools del navegador (F12 → Alternar barra de herramientas de dispositivo). Los bloques deberían intercambiar sus lugares: imagen arriba, texto abajo.

Cómo adaptar este método a su proyecto

Tres escenarios típicos y qué cambiar en el código:

Usa un constructor de páginas diferente. Busque el campo de clase CSS personalizada en los ajustes de sección/columna. En Elementor, está en Avanzado → Clases CSS; en Bricks, en Ajustes → CSS ID y clases. Introduzca los nombres de sus clases y actualice los selectores CSS en consecuencia.

Está programando a mano sin un constructor de páginas. Aún más fácil: escriba las clases necesarias directamente en el marcado HTML de su plantilla. El código CSS sigue siendo el mismo; solo adapte los selectores a su marcado.

Tiene tres o más bloques en lugar de dos. Añada una regla para cada bloque en la media query con su propio valor de order. Por ejemplo: .block-a { order: 1; }, .block-b { order: 2; } y .block-c { order: 3; }. Los números no tienen que ser consecutivos; puede usar order: 10 para garantizar que un elemento se mueva al final.

Asegúrese de que el contenedor padre tenga display: flex; sin ello, order se ignora silenciosamente y perderá media hora depurando. El escenario más común: el contenedor tiene por defecto display: block, se aplica flex pero es anulado por una regla del tema más específica. DevTools → Computado le mostrará el valor final.

Vea este breve video sobre el tema, que demuestra claramente cómo order reorganiza los bloques en tiempo real:

⁉️🤔 Preguntas frecuentes

¿Funciona order en todos los navegadores?

order es compatible con todos los navegadores modernos desde 2015, incluido Safari en iOS y Chrome en Android. Según datos de caniuse.com, el soporte global de flexbox es del 99,2%. Si necesita compatibilidad con IE11 (que entiende flexbox pero tiene errores), añada -ms-flex-order con el mismo valor.

¿Afecta order al indexado de los motores de búsqueda?

No. Los rastreadores de los motores de búsqueda leen el HTML fuente de la página y order solo cambia el orden visual en el navegador. Google lo confirma: las reorganizaciones mediante CSS no afectan al posicionamiento. El orden original del contenido en el HTML permanece inalterado.

¿Por qué no funciona mi order?

Tres razones más comunes: (1) el bloque padre no tiene display: flex; (2) la media query es anulada por una regla del tema más específica; (3) el elemento hijo tiene un valor de display distinto de block (como inline). Sigue convirtiéndose en un elemento flex, pero el comportamiento puede diferir. Abra DevTools, pestaña Elementos → Computado: compruebe si su order se aplica y no está tachado.

¿Puedo cambiar el orden usando CSS Grid en lugar de flexbox?

Sí. Grid tiene una propiedad order que funciona de manera idéntica. Además, Grid ofrece una alternativa: puede establecer grid-row y grid-column para un posicionamiento explícito de elementos sin order. Pero si simplemente tiene una fila de dos columnas, flexbox es más simple (menos código).

¿Qué hago si mi constructor de páginas no permite añadir una clase personalizada?

Algunos constructores antiguos o con funciones limitadas no muestran el campo Clase CSS. En ese caso: (1) envuelva la sección en un grupo y asigne la clase al grupo; (2) use el selector CSS integrado del constructor (por ejemplo, .kc-column-12a3b para King Composer), que puede encontrar mediante DevTools; (3) cambie a Gutenberg con un contenedor de grupo, donde cada bloque tiene un campo "Clase CSS adicional" en el panel derecho.

Conclusiones clave sobre el intercambio de orden de bloques

La propiedad CSS order es la forma más sencilla de controlar la secuencia visual de los bloques sin editar el HTML. La flexibilidad se consigue con tres líneas en una media query: establezca display: flex en el contenedor, asigne order: 1 y order: 2 a los bloques hijos en el punto de ruptura móvil, y listo.

La ruta de implementación más segura: añada CSS a través de Apariencia → Personalizar → CSS adicional o el plugin Code Snippets; no modifique los archivos del tema. Antes de publicar, pruebe la página mediante DevTools en un emulador de iPhone y en un dispositivo real. Si order no funciona, verifique primero el valor display computado del contenedor.

¿Ha probado este método en su sitio? Comparta en los comentarios qué constructor de páginas usó y qué intercambió.