Skip to main content

Orders

Version: 2.0.0
Edit

Utilities for setting the order property of a flex or grid item in its container.

All flex/grid items start with an order value of 0.

Integers

Author: Mary Ditchen
Since: 2.0.0
Source: /source/patterns/utilities/orders.scss#L11

Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
Flex item 8
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
Flex item 8
Flex item 9
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
Flex item 8
Flex item 9
Flex item 10
<!-- order zero -->
<div>
  <div class="u-order-0">Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>
<!-- order one -->
<div>
  <div class="u-order-1">Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>
<!-- order two -->
<div>
  <div class="u-order-2">Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>
<!-- order three -->
<div>
  <div class="u-order-3">Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>
<!-- order four -->
<div>
  <div class="u-order-4">Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
  <div>Flex item 4</div>
</div>
<!-- order five -->
<div>
  <div class="u-order-5">Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
  <div>Flex item 4</div>
  <div>Flex item 5</div>
</div>
<!-- order six -->
<div>
  <div class="u-order-6">Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
  <div>Flex item 4</div>
  <div>Flex item 5</div>
  <div>Flex item 6</div>
</div>
<!-- order seven -->
<div>
  <div class="u-order-7">Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
  <div>Flex item 4</div>
  <div>Flex item 5</div>
  <div>Flex item 6</div>
  <div>Flex item 7</div>
</div>
<!-- order eight -->
<div>
  <div class="u-order-8">Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
  <div>Flex item 4</div>
  <div>Flex item 5</div>
  <div>Flex item 6</div>
  <div>Flex item 7</div>
  <div>Flex item 8</div>
</div>
<!-- order nine -->
<div>
  <div class="u-order-9">Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
  <div>Flex item 4</div>
  <div>Flex item 5</div>
  <div>Flex item 6</div>
  <div>Flex item 7</div>
  <div>Flex item 8</div>
  <div>Flex item 9</div>
</div>
<!-- order ten -->
<div>
  <div class="u-order-10">Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
  <div>Flex item 4</div>
  <div>Flex item 5</div>
  <div>Flex item 6</div>
  <div>Flex item 7</div>
  <div>Flex item 8</div>
  <div>Flex item 9</div>
  <div>Flex item 10</div>
</div>

Negative Integers

Author: Mary Ditchen
Since: 2.0.0
Source: /source/patterns/utilities/orders.scss#L119

Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
Flex item 8
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
Flex item 8
Flex item 9
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
Flex item 8
Flex item 9
Flex item 10
<!-- order neg one -->
<div>
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div class="u-order-neg-1">Flex item 3</div>
</div>
<!-- order neg two -->
<div>
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div class="u-order-neg-2">Flex item 3</div>
</div>
<!-- order neg three -->
<div>
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div class="u-order-neg-3">Flex item 3</div>
</div>
<!-- order neg four -->
<div>
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
  <div class="u-order-neg-4">Flex item 4</div>
</div>
<!-- order neg five -->
<div>
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
  <div>Flex item 4</div>
  <div class="u-order-neg-5">Flex item 5</div>
</div>
<!-- order neg six -->
<div>
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
  <div>Flex item 4</div>
  <div>Flex item 5</div>
  <div class="u-order-neg-6">Flex item 6</div>
</div>
<!-- order neg seven -->
<div>
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
  <div>Flex item 4</div>
  <div>Flex item 5</div>
  <div>Flex item 6</div>
  <div class="u-order-neg-7">Flex item 7</div>
</div>
<!-- order neg eight -->
<div>
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
  <div>Flex item 4</div>
  <div>Flex item 5</div>
  <div>Flex item 6</div>
  <div>Flex item 7</div>
  <div class="u-order-neg-8">Flex item 8</div>
</div>
<!-- order neg nine -->
<div>
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
  <div>Flex item 4</div>
  <div>Flex item 5</div>
  <div>Flex item 6</div>
  <div>Flex item 7</div>
  <div>Flex item 8</div>
  <div class="u-order-neg-9">Flex item 9</div>
</div>
<!-- order neg ten -->
<div>
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
  <div>Flex item 4</div>
  <div>Flex item 5</div>
  <div>Flex item 6</div>
  <div>Flex item 7</div>
  <div>Flex item 8</div>
  <div>Flex item 9</div>
  <div class="u-order-neg-10">Flex item 10</div>
</div>

Globals

Author: Mary Ditchen
Since: 2.0.0
Source: /source/patterns/utilities/orders.scss#L306

Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
<!-- order inherit -->
<div>
  <div>Flex item 1</div>
  <div class="u-order-inherit">Flex item 2</div>
  <div>Flex item 3</div>
</div>
<!-- order initial -->
<div>
  <div>Flex item 1</div>
  <div class="u-order-initial">Flex item 2</div>
  <div>Flex item 3</div>
</div>
<!-- order unset -->
<div>
  <div>Flex item 1</div>
  <div class="u-order-unset">Flex item 2</div>
  <div>Flex item 3</div>
</div>