order

Ejemplos

Establecer un orden de clasificación explícito

Utiliza utilidades order-<number> como order-1 y order-3 para renderizar elementos 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>

Ordenar elementos al principio o al final

Utiliza las utilidades order-first y order-last para renderizar elementos flex y grid al principio o al final:

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

Usar valores negativos

Para usar un valor de orden negativo, antepón un guión al nombre de la clase para convertirlo en un valor negativo:

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

Usar un valor personalizado

Usa la sintaxis order-[<value>] para establecer el/la order basándose 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 añade la función var() por ti automáticamente.

Diseño responsivo

Antepone a la utilidad order el prefijo de una variante de punto de ruptura como md: para aplicar la utilidad únicamente en tamaños de pantalla mediano y superiores:

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

Obtén más información sobre el uso de variantes en la documentación de variantes.