• Visual Language
  • Grid

Push pull grid

View Push pull grid

 
<h2>Push Pull grid</h2>
<div class="grid-wrap">
  <div class="grid-col desktop-grid-one-half desktop-grid-push-one-half">
    <code>One Half 1st in source order</code>
  </div>
  <div class="grid-col desktop-grid-one-half desktop-grid-pull-one-half">
    <code>One half 2nd in source order</code>
  </div>
</div>
<div class="grid-wrap">
  <div class="grid-col desktop-grid-one-third desktop-grid-push-two-thirds">
    <code>One Third 1st in source order</code>
  </div>
  <div class="grid-col desktop-grid-two-thirds desktop-grid-pull-one-third">
    <code>Two Thirds 2nd in source order</code>
  </div>
</div>
<div class="grid-wrap">
  <div class="grid-col desktop-grid-one-quarter desktop-grid-push-three-quarters">
    <code>One Quarter 1st in source order</code>
  </div>
  <div class="grid-col desktop-grid-three-quarters desktop-grid-pull-one-quarter">
    <code>Three Quarters 2nd in source order</code>
  </div>
</div>
<div class="grid-wrap">
  <div class="grid-col desktop-grid-one-sixth desktop-grid-push-five-sixths">
    <code>One Sixth 1st in source order</code>
  </div>
  <div class="grid-col desktop-grid-five-sixths desktop-grid-pull-one-sixth">
    <code>Five Sixths 2nd in source order</code>
  </div>
</div>

Developer Notes

The push and pull features of the grid system allow developers to display content in a different order to how they are placed in the markup.