Utilidades · Dirección y orden

Reverse (flujo visual)

Invierte la dirección visual de Grid o Flex y cambia la posición de elementos concretos con order, sin alterar el orden semántico del HTML.

v2.0

Grid

Invierte el eje inline mediante direction y conserva la lectura interna de cada hijo.

Flex

Alterna entre fila, fila inversa, columna y columna inversa con flex-direction.

Order

Asigna prioridad visual a un hijo Flex o Grid con valores de -9999 a 9999.

Código + resultado

Compara qué invierte cada familia

El HTML mostrado es el mismo que produce cada resultado aplicado.

<div class="grid grid-col-3 reverse-grid-x-e">
  <span>A</span>
  <span>B</span>
  <span>C</span>
</div>

ABC

.reverse-grid-x-e usa direction: rtl en el Grid para comenzar desde el extremo derecho, pero devuelve cada hijo a ltr para no invertir su texto.

<div class="display-flex reverse-flex-x-e">
  <span>A</span>
  <span>B</span>
  <span>C</span>
</div>

ABC

.reverse-flex-x-e aplica flex-direction: row-reverse: mantiene el eje horizontal e invierte su sentido.

<div class="display-flex reverse-flex-y-e">
  <span>A</span>
  <span>B</span>
  <span>C</span>
</div>

ABC

.reverse-flex-y-e aplica flex-direction: column-reverse: organiza verticalmente y comienza desde abajo.

<div class="display-flex">
  <span class="order-1">A</span>
  <span class="order-first">B</span>
  <span class="order-2">C</span>
</div>

ABC

.order-first asigna order: -9999 a B; por eso aparece antes que A y C sin cambiar su posición en el HTML.

Mapa del sistema

Elige según el contenedor

La clase reverse siempre va en el contenedor; la clase order se aplica directamente al hijo que quieres priorizar.

GRID.reverse-grid-*

Dirección inline

Úsala en un contenedor Grid para empezar a distribuir columnas desde la derecha o restaurar el inicio izquierdo.

Propiedad: direction

FLEX.reverse-flex-*

Eje y sentido

Úsala en un contenedor Flex para controlar fila o columna y decidir desde qué extremo comienza.

Propiedad: flex-direction

HIJO.order-*

Prioridad individual

Úsala en un hijo de Grid o Flex para cambiar su posición visual respecto de sus hermanos.

Propiedad: order

Lectura de clases

Un segmento para el eje y otro para el sentido

Lee la clase como .reverse-{layout}-{eje}-{sentido}. En el segmento del eje, x representa el eje horizontal y y el vertical. En el último segmento, s significa start y e significa end.

Ejemplo: .reverse-flex-x-e x selecciona el eje horizontal (fila). La e final significa end y activa la inversión: row-reverse.

.reverse-grid-x-eGrid · horizontal · invertido

x: eje inline. e: end. Resultado: direction: rtl.

.reverse-grid-x-sGrid · horizontal · normal

x: eje inline. s: start. Resultado: direction: ltr.

.reverse-flex-x-eFlex · fila · invertida

x: eje horizontal. e: end. Resultado: row-reverse.

.reverse-flex-x-sFlex · fila · normal

x: eje horizontal. s: start. Resultado: row.

.reverse-flex-y-eFlex · columna · invertida

y: eje vertical. e: end. Resultado: column-reverse.

.reverse-flex-y-sFlex · columna · normal

y: eje vertical. s: start. Resultado: column.

Regla rápidaEl penúltimo segmento elige el eje: -x- = horizontal y -y- = vertical. El último elige el sentido: -s = normal y -e = invertido.

Orden de hijos

Extremos y trece posiciones numéricas

Los elementos se ordenan de menor a mayor valor; cuando comparten el mismo valor, conserva prioridad el orden original del HTML.

.order-first-9999

Envía el elemento antes de cualquier valor numérico incluido por el módulo.

.order-last9999

Envía el elemento después de cualquier valor numérico incluido por el módulo.

.order-0order: 0

.order-1order: 1

.order-2order: 2

.order-3order: 3

.order-4order: 4

.order-5order: 5

.order-6order: 6

.order-7order: 7

.order-8order: 8

.order-9order: 9

.order-10order: 10

.order-11order: 11

.order-12order: 12

Accesibilidadorder cambia la presentación visual, no la lectura del DOM. Mantén en el HTML un orden lógico para teclado y tecnologías de asistencia.

Variantes responsive

Ocho puntos de activación

Inserta el breakpoint después de la familia. La regla comienza a aplicarse desde ese ancho porque utiliza min-width.

640min-width.reverse-flex-640-x-e

768min-width.reverse-flex-768-x-e

1024min-width.reverse-flex-1024-x-e

1280min-width.reverse-flex-1280-x-e

1536min-width.reverse-flex-1536-x-e

2560min-width.reverse-flex-2560-x-e

3840min-width.reverse-flex-3840-x-e

6016min-width.reverse-flex-6016-x-e

HTML

<div class="display-flex reverse-flex-x-s reverse-flex-768-x-e">
  <article>Primero en el HTML</article>
  <article>Segundo en el HTML</article>
</div>

Hasta 767px mantiene row. Desde 768px, .reverse-flex-768-x-e cambia el contenedor a row-reverse.

.reverse-grid-{bp}-x-e

Invierte Grid desde el breakpoint.

.reverse-flex-{bp}-{x|y}-{s|e}

Define eje y sentido de Flex desde el breakpoint.

.order-{bp}-{valor}

Cambia el orden del hijo desde el breakpoint.

Referencia

Clases disponibles

Cada clase base indica la propiedad exacta que modifica y el efecto que produce.

Clases	Propiedad	Función	Uso
`.reverse-grid-x-e`	`direction: rtl`	Hace que el Grid distribuya su eje inline desde la derecha; restablece los hijos a `ltr`.	Invertir columnas Grid.
`.reverse-grid-x-s`	`direction: ltr`	Hace que el Grid distribuya su eje inline desde la izquierda; mantiene los hijos en `ltr`.	Restaurar Grid normal.
`.reverse-flex-x-e`	`flex-direction: row-reverse`	Conserva el eje horizontal e invierte el orden visual de los hijos.	Fila de derecha a izquierda.
`.reverse-flex-x-s`	`flex-direction: row`	Conserva el eje horizontal y restaura el sentido visual inicial.	Fila de izquierda a derecha.
`.reverse-flex-y-e`	`flex-direction: column-reverse`	Cambia al eje vertical y coloca visualmente el último hijo arriba.	Columna de abajo hacia arriba.
`.reverse-flex-y-s`	`flex-direction: column`	Cambia al eje vertical y conserva el orden visual del HTML.	Columna de arriba hacia abajo.
`.order-first`	`order: -9999`	Coloca el elemento antes que los valores numéricos de la escala.	Prioridad visual inicial.
`.order-last`	`order: 9999`	Coloca el elemento después que los valores numéricos de la escala.	Prioridad visual final.
`.order-0`	`order: 0`	Asigna al elemento la posición numérica 0 dentro del orden visual del contenedor.	Hijo de Grid o Flex.
`.order-1`	`order: 1`	Asigna al elemento la posición numérica 1 dentro del orden visual del contenedor.	Hijo de Grid o Flex.
`.order-2`	`order: 2`	Asigna al elemento la posición numérica 2 dentro del orden visual del contenedor.	Hijo de Grid o Flex.
`.order-3`	`order: 3`	Asigna al elemento la posición numérica 3 dentro del orden visual del contenedor.	Hijo de Grid o Flex.
`.order-4`	`order: 4`	Asigna al elemento la posición numérica 4 dentro del orden visual del contenedor.	Hijo de Grid o Flex.
`.order-5`	`order: 5`	Asigna al elemento la posición numérica 5 dentro del orden visual del contenedor.	Hijo de Grid o Flex.
`.order-6`	`order: 6`	Asigna al elemento la posición numérica 6 dentro del orden visual del contenedor.	Hijo de Grid o Flex.
`.order-7`	`order: 7`	Asigna al elemento la posición numérica 7 dentro del orden visual del contenedor.	Hijo de Grid o Flex.
`.order-8`	`order: 8`	Asigna al elemento la posición numérica 8 dentro del orden visual del contenedor.	Hijo de Grid o Flex.
`.order-9`	`order: 9`	Asigna al elemento la posición numérica 9 dentro del orden visual del contenedor.	Hijo de Grid o Flex.
`.order-10`	`order: 10`	Asigna al elemento la posición numérica 10 dentro del orden visual del contenedor.	Hijo de Grid o Flex.
`.order-11`	`order: 11`	Asigna al elemento la posición numérica 11 dentro del orden visual del contenedor.	Hijo de Grid o Flex.
`.order-12`	`order: 12`	Asigna al elemento la posición numérica 12 dentro del orden visual del contenedor.	Hijo de Grid o Flex.
`.reverse-grid-{bp}-x-{s\|e}`	`direction`	Aplica el sentido normal o inverso del Grid desde el breakpoint indicado.	`.reverse-grid-768-x-e`
`.reverse-flex-{bp}-{x\|y}-{s\|e}`	`flex-direction`	Aplica el eje y sentido de Flex desde el breakpoint indicado.	`.reverse-flex-768-y-e`
`.order-{bp}-{first\|last\|0…12}`	`order`	Asigna la prioridad visual al hijo desde el breakpoint indicado.	`.order-768-first`

Recomendaciones

Buenas prácticas de reverse y order

Elige por contexto

Usa la familia Grid o Flex que corresponda al display real del contenedor.

-s vuelve al inicio

El sufijo -s significa start: restaura row, column o ltr. En cambio, -e invierte el sentido.

Protege la lectura

No uses inversión visual para corregir un HTML cuyo orden semántico sea incorrecto.

Order sólo en hijos

Aplica .order-* a elementos que participan directamente en un contenedor Grid o Flex.