# Reverse (flujo visual)

> Documentación de QuicklyCSS V2 2.0.0-alpha.2. Versión preliminar.

- Página canónica: https://quicklycss.cl/docs/reverse.php
- Catálogo de API: https://quicklycss.cl/quicklycss-api.json
- Índice para IA: https://quicklycss.cl/llms.txt

Utilidades · Dirección y orden

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

G
## Grid
Invierte el eje inline mediante `direction` y conserva la lectura interna de cada hijo.

F
## 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`.

i

## Tres herramientas, tres alcances
`.reverse-grid-*` cambia la dirección inline del Grid; `.reverse-flex-*` cambia el eje y sentido de Flex; `.order-*` mueve sólo el elemento que recibe la clase.

Código + resultado

## Compara qué invierte cada familia

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

HTML

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

Resultado aplicado  C · B · A
A  B  C

`.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.

HTML

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

Resultado aplicado  row-reverse
A  B  C

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

HTML

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

Resultado aplicado  column-reverse
A  B  C

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

HTML

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

Resultado aplicado  B · A · C
A  B  C

`.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-e` Grid · horizontal · invertido  `x`: eje inline. `e`: end. Resultado: `direction: rtl`.

`.reverse-grid-x-s` Grid · horizontal · normal  `x`: eje inline. `s`: start. Resultado: `direction: ltr`.

`.reverse-flex-x-e` Flex · fila · invertida  `x`: eje horizontal. `e`: end. Resultado: `row-reverse`.

`.reverse-flex-x-s` Flex · fila · normal  `x`: eje horizontal. `s`: start. Resultado: `row`.

`.reverse-flex-y-e` Flex · columna · invertida  `y`: eje vertical. `e`: end. Resultado: `column-reverse`.

`.reverse-flex-y-s` Flex · columna · normal  `y`: eje vertical. `s`: start. Resultado: `column`.

Regla rápida  El 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-last` 9999  Envía el elemento después de cualquier valor numérico incluido por el módulo.

`.order-0` order: 0

`.order-1` order: 1

`.order-2` order: 2

`.order-3` order: 3

`.order-4` order: 4

`.order-5` order: 5

`.order-6` order: 6

`.order-7` order: 7

`.order-8` order: 8

`.order-9` order: 9

`.order-10` order: 10

`.order-11` order: 11

`.order-12` order: 12

Accesibilidad  `order` 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`.

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

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

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

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

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

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

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

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

HTML
```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

01
### Elige por contexto
Usa la familia Grid o Flex que corresponda al `display` real del contenedor.

02
### -s vuelve al inicio
El sufijo `-s` significa  start : restaura `row`, `column` o `ltr`. En cambio, `-e` invierte el sentido.

03
### Protege la lectura
No uses inversión visual para corregir un HTML cuyo orden semántico sea incorrecto.

04
### Order sólo en hijos
Aplica `.order-*` a elementos que participan directamente en un contenedor Grid o Flex.