order

order controla la posición visual de un ítem flex dentro de su contenedor sin mover su lugar en el HTML. Los ítems se muestran de menor a mayor valor de order; los que tienen el mismo valor de order se muestran en el orden del DOM. El valor por defecto es 0 para todos los ítems, lo que significa que sin declarar nada el orden visual coincide con el orden del HTML.

La utilidad de order radica en casos donde el orden lógico del HTML y el orden visual deseado difieren por razones de diseño o de contexto. El ejemplo clásico es una barra de herramientas con un HTML que pone el menú de navegación primero — por SEO o accesibilidad — pero que visualmente debe aparecer después de un logo o un campo de búsqueda. Con order, esa reordenación visual queda en CSS sin tocar el HTML.

Sin embargo, order tiene una limitación estructural que define cuándo es apropiado usarlo: el cambio es estrictamente visual. El orden de tabulación con teclado, el orden de lectura de los lectores de pantalla y el orden lógico del DOM siguen siendo el del HTML. Si una persona navega con Tab o usa un lector de pantalla como VoiceOver o NVDA, recorre los elementos en su orden HTML, no en el orden visual que order establece. Cuando esos dos órdenes difieren de forma significativa, la experiencia del usuario puede volverse confusa o inaccesible.

Sintaxis

.item {
  order: 0;    /* por defecto — respeta el orden del HTML */
  order: -1;   /* aparece antes que los ítems con order: 0 */
  order: 1;    /* aparece después que los ítems con order: 0 */
  order: 999;  /* aparece al final (si ningún otro tiene un valor mayor) */
}

Valores

order acepta un número entero (positivo, negativo o cero). No acepta valores con unidades.

• 0 (por defecto): el ítem participa en el flujo visual según su posición en el HTML.
• Negativo (-1, -2, …): el ítem aparece antes de los ítems con order: 0. Cuanto más negativo, más al inicio.
• Positivo (1, 2, …): el ítem aparece después de los ítems con order: 0. Cuanto mayor, más al final.

Los ítems con el mismo valor de order se ordenan entre sí según su posición en el HTML (el orden del DOM desempata).

Cuándo usarlo

Un caso válido frecuente: en mobile, un elemento decorativo (imagen) aparece primero en el HTML para que sea lo primero en cargarse, pero en desktop la imagen debe ir a la derecha. Con order: -1 en mobile y el valor por defecto en desktop, el cambio visual no toca el HTML.

⚠️ Gotcha de accesibilidad

order cambia el orden visual pero no el orden de tabulación con teclado ni el orden de lectura de los lectores de pantalla. Ambos siguen el orden del DOM.

Esto tiene consecuencias reales:

• Un usuario que navega con Tab verá el foco saltar en un orden distinto al visual. Si el botón “Guardar” tiene order: -1 para aparecer primero visualmente pero está al final del HTML, el foco llegará a él después de todos los demás botones — lo opuesto a lo que el diseño sugiere.
• Un lector de pantalla como NVDA o VoiceOver leerá los elementos en el orden del HTML. Si el orden lógico de lectura fue perturbado por order, el contenido puede sonar incoherente o confuso.

La regla: order es seguro cuando el reordenamiento es puramente estético y no cambia el flujo lógico de lectura ni interacción. Si el reordenamiento importa para entender el contenido o para interactuar con él, reorganizá el HTML en lugar de usar order.

Notas y gotchas

• El valor por defecto es 0, no 1. Todos los ítems sin declaración de order tienen order: 0. Para mover un ítem al inicio basta con order: -1; para el final, order: 1 (asumiendo que los demás tienen 0).
• Los valores negativos funcionan. order: -1 mueve un ítem antes de todos los que tienen order: 0.
• order solo funciona en ítems flex (o grid). No tiene efecto en elementos con display: block, display: inline, etc.
• Empates se resuelven por el DOM. Si dos ítems tienen order: 1, el que aparece primero en el HTML aparece primero visualmente.
• No afecta z-index. order no cambia el orden de apilamiento. Si los ítems se superponen, el apilamiento sigue las reglas normales de z-index y el orden del DOM.

Vigente / legacy

order está disponible en todos los navegadores modernos desde 2015 (baseline widely). No se necesitan prefijos de vendor para código nuevo. La versión prefijada -webkit-order era necesaria solo para navegadores ya obsoletos.