Order

Below, utility classes to apply order property.

@for $value from 0 through 16

Class	Properties
.order-first	order: -9999;
.order-last	order: 9999;
.order-<value>	order: #{$value};

Example(s)

1

2

3

4

5

<div class="h-48 flex-row ...">
  <div class="sqrt-12 order-2 ...">1</div>
  <div class="sqrt-12 order-first ...">2</div>
  <div class="sqrt-12 order-3 ...">3</div>
  <div class="sqrt-12 order-last ...">4</div>
  <div class="sqrt-12 order-4 ...">5</div>
</div>

Media Queries

order is supported by changing state on-the-fly! You can use it like this:

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