title: What do push/pull classes do in a grid system?
body: <p>When I look at a lot of CSS grid systems and frameworks they usually have a standard column and row setup with percentage widths. Something like this for example:</p>
  
  <p><strong>standard grid column:</strong></p>
  
  <pre><code>.col-10 {
    width: 83.33333%;
    width: calc(100% / 12 * 10);
    width: -webkit-calc(100% / 12 * 10);
    width: -moz-calc(100% / 12 * 10); }
  </code></pre>
  
  <p>However, in addition to this, I often see other classes like <code>.push</code> or <code>.pull</code>. For example like this:</p>
  
  <p><strong>push/pull classes:</strong></p>
  
  <pre><code>.push-10 {
    left: 83.33333%;
    left: calc(100% / 12 * 10);
    left: -webkit-calc(100% / 12 * 10);
    left: -moz-calc(100% / 12 * 10); }
  
  .pull-10 {
    left: -83.33333%;
    left: calc(-100% / 12 * 10);
    left: -webkit-calc(-100% / 12 * 10);
    left: -moz-calc(-100% / 12 * 10); }
  </code></pre>
  
  <p>I've come to use grid systems quite a bit but I've never needed to use these classes. Probably because I don't know what they do. So my questions are:</p>
  
  <ol>
  <li>What does a push class usually do?</li>
  <li>What does a pull class usually do?</li>
  <li>When would you want to use each of them?</li>
  <li>How do you use each of them?</li>
  <li>Provide a fiddle example to demonstrate.</li>
  </ol>