Rewrote the positioning CSS to allow specifying the screen size(s) when it is applicable

This changes the behaviour of the positioning CSS.

The previous positioning CSS combined two functions:
1. Specifying the direction from which to position the affected element.
2. Specifying the distance from position 0.
This second one duplicated the functionality of the margin CSS.

Now the `sm`, `md`, `lg`, `xl` qualifiers specify the screen size at which the positioning is to be applied. The position will always be 0 from whichever direction is specified.

The distance from position 0 should now be specified using the margin classes.

cc/@cfarquharson