[CSS] Updated the position CSS to work like the grid CSS

In the previous iteration of the position CSS, each class applied exclusively to a specified screen size range (e.g., `sm`).

In this iteration, each class applies starting from the lowest range for the specified screen size. This mirrors the behaviour of the grid CSS `sm`, `md`, `lg`, etc. specific classes.

cc/@cfarquharson