← Tailwind CSS classes list

Tailwind CSS class: .order-1 / .order-*

                    <div class="flex bg-gray-200">
  <div class="order-2 bg-teal-400 p-2 m-2">1</div>
  <div class="order-3 bg-teal-400 p-2 m-2">3</div>
  <div class="order-last bg-teal-400 p-2 m-2">4</div>
  <div class="order-first bg-teal-400 p-2 m-2">5</div>
  <div class="bg-teal-400 p-2 m-2">6</div>
</div>
                

Preview

1

3

4

5

6

CSS source

.order-first { order: -9999; }
.order-last { order: 9999; }
.order-none { 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; }

More in Tailwind CSS Flex

Tailwind CSS