order

Ejemplos

Estableciendo explícitamente un orden de clasificación

Usa utilidades order-<number> como order-1 y order-3 para renderizar ítems flex y grid en un orden diferente al que aparecen en el documento:

<div class="flex justify-between ...">
  <div class="order-3 ...">01</div>
  <div class="order-1 ...">02</div>
  <div class="order-2 ...">03</div>
</div>

Ordenando ítems primero o último

Usa las utilidades order-first y order-last para renderizar ítems flex y grid primero o último:

<div class="flex justify-between ...">
  <div class="order-last ...">01</div>
  <div class="...">02</div>
  <div class="order-first ...">03</div>
</div>

Usando valores negativos

Para usar un valor de orden negativo, prefija el nombre de la clase con un guion para convertirlo en un valor negativo:

<div class="-order-1">
  <!-- ... -->
</div>

Usando un valor personalizado

Usa la sintaxis order-[<value>] para establecer el order basado en un valor completamente personalizado:

<div class="order-[min(var(--total-items),10)] ...">
  <!-- ... -->
</div>

Para variables CSS, también puedes usar la sintaxis order-(<custom-property>) :

<div class="order-(--my-order) ...">
  <!-- ... -->
</div>

Esto es solo un atajo para order-[var(<custom-property>)] que agrega la función var() por ti automáticamente.

Responsive design

Prefija una utilidad order con una variante de breakpoint como md: para aplicar la utilidad solo en tamaños de pantalla medium y superiores:

<div class="order-first md:order-last ...">
  <!-- ... -->
</div>

Aprende más sobre el uso de variantes en la documentación de variantes.