Add Column Shuffling

Created a class structure allowing developers to shuffle around columns
in a grid allowing, for example, to put the column that would be on the
left by default, to the right and the column that would be on the the
right by default on the left. This adversely allows the column that is
now on the right, to collapse to the top above the column that is now on
the right.

This uses the same syntax as the grid system. The default shuffle (non
responsive) looks like `left-1` or `right-2` where right and left refer
to which side the column will shuffle from and the number represents how
many columns it will shuffle over.

```html
<div class='pure-g'>
    <p class='pure-u-3-4 left-1'>right</p>
    <p class='pure-u-1-4 right-3'>left</p>
</div>
```

The responsive syntax for shuffling is also like the grid system, so `left-sm-1` would apply when the
viewport is greater than 35.5em (default).

```html
<div class='pure-g'>
    <p class='pure-u-3-4 pure-u-sm-2-5 pure-u-md-1-2 left-1 left-sm-3 left-md-1'>right</p>
    <p class='pure-u-1-4  pure-u-sm-3-5 pure-u-md-1-2 right-3 right-sm-2 right-md-1'>left</p>
</div>
```