What do push/pull classes do in a grid system?

Question

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:

standard grid column:

.col-10 {
  width: 83.33333%;
  width: calc(100% / 12 * 10);
  width: -webkit-calc(100% / 12 * 10);
  width: -moz-calc(100% / 12 * 10); }

However, in addition to this, I often see other classes like .push or .pull. For example like this:

push/pull classes:

.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); }

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:

1. What does a push class usually do?
2. What does a pull class usually do?
3. When would you want to use each of them?
4. How do you use each of them?
5. Provide a fiddle example to demonstrate.

Answer 1

They're for reordering content. Lets say you want your content to come first in the HTML markup and then a sidebar second, but you want the sidebar to come first in the display (on the left) and then the content to come second (on the right).

Using Bootstrap as an example:

<div class="row">
    <div class="col-md-9 col-md-push-3">This is content that comes <strong>first in the markup</strong>, but looks like it comes second in the view.</div>
    <div class="col-md-3 col-md-pull-9">This is the sidebar, that comes <strong>second in the markup</strong>, but looks like it comes first in the view.</div>
</div>

The col-sm-push-3 means move the column 25% from the left (left: 25%).

The col-sm-pull-9 means move the column 75% from the right (right: 75%).

So in this scenario the large column is being 'pushed' the width of the small column, and the small column is being 'pulled' the width of the large column.

Demo using Bootstrap

---

Something like this:

.push-10 {
    left: calc(100% / 12 * 10);
}

Means, take the width of the container (100%), divide it by the number of columns in the grid (12) and multiple it by the number you want to push it by (10). Leaving you with 83.33333333%.