Order #

In CSS Grid you have access to a order property, with a default value of 0. To move around specific elements we can use the acol-order- class to change the order value. acol-order- supports both static and responsive syntax. Examples:

order-first sends the element to the start of the grid with order: -1 order-last sends the element to the end of the grid with order: 12 order-[1-11] (max. 11) sets order: [1-11]

Order responsive example - 12 column style

• 1st
• 2nd
• 3rd
• 4th
• 5ft

<ul class="agrid">
    <li class="sm:acol-2 md:acol-3 lg:acol-4 xl:acol-6">1st</li>
    <li class="sm:acol-2 md:acol-3 lg:acol-4 xl:acol-6 xl:order-3">
        2nd
    </li>
    <li class="sm:acol-2 md:acol-3 xl:order-2">3rd</li>
    <li class="sm:acol-2 md:acol-3 xl:order-1">4th</li>
    <li class="sm:acol-2 md:acol-3 xl:order-3">5ft</li>
</ul>

Utility classes #

You can set the breakpoints as prefixes to each class - sm:, md:, etc.

.order-first {
  --agrid-order: -1;
}

.order-last {
  --agrid-order: 12;
}

.order-1 {
  --agrid-order: 1;
}

.order-2 {
  --agrid-order: 2;
}

.order-3 {
  --agrid-order: 3;
}

.order-4 {
  --agrid-order: 4;
}

.order-5 {
  --agrid-order: 5;
}

.order-6 {
  --agrid-order: 6;
}

.order-7 {
  --agrid-order: 7;
}

.order-8 {
  --agrid-order: 8;
}

.order-9 {
  --agrid-order: 9;
}

.order-10 {
  --agrid-order: 10;
}

.order-11 {
  --agrid-order: 11;
}