@moodxd/utility-order v1.0.3

MoO Utility Order

Order classes are used along with Size classes to change the order of markup visually on screen. The Order classes are used to push a cell to the left or right with left/right positioning property. The Order classes are similar to the Size class pattern (xof2, xof3, xof4, xof5, xof6, xof8, xof10, xof12) with an option to use the -sm-, -md- and -lg- breakpoint prefixes.

There are two Order classes:

• Push – Use Push to add a left style to the element
• Pull – Use Pull to add a right style to the element

<div class="Grid">
  <div class="Grid-cell u-md-push1of2 u-md-size1of2">
    <div class="u-bgYellowLighter u-pV4">1st in Markup</div>
  </div>
  <div class="Grid-cell u-md-pull1of2 u-md-size1of2">
    <div class="u-bgRedLighter u-pV4">2nd in Markup</div>
  </div>
</div>

Note: When using the Order classes with the Size classes it is easier to use the same [X]of[Y] pattern that the Size class is using. For example, if an element has u-size3of8 then it is best practice to use u-pull[X]of8 or u-push[X]of8.

Similar to the Offset class, the [X] of the Size and Push/Pull pattern when added together should be equal to or less than [Y]. For example, if there are two elements, the first would be u-size3of8 u-push5of8 while the second element would be u-size5of8 u-pull3of8. In both cases the [X] of the Size and Pull classes equals 8.

Best Practice: At the Desktop breakpoint you have a two-column page layout. But at the Mobile breakpoint, you want the content in the right column at the Desktop breakpoint to be above the content in the left column. In the HTML markup, the right column would be before the left column, so use the Push and Pull classes to reorder the markup correctly at the Desktop breakpoint.