Remove `!important` and reorder certain styles in grid system to fix centered grid

Fixes #4624.

1. Move the original `[class*="column"] + [class*="column"]:last-child` out of the mixin `grid-html-classes($size)`, since its styles are irrelevant to the `$size` variable.

2. `[class*="column"] + [class*="column"]:last-child` style rules were [inserted back prior to all media queries](https://github.com/MrOrz/foundation/compare/zurb:master...master#diff-5ad1ec6dd4eb36244de99e0341ae2d55R235), in order to make sure the default behavior, that is `:last-child` floating to opposite direction, stays intact.

3. Since `[class*="column"] + [class*="column"]:last-child` has a specificity of `0,0,3,0`, we need to [add some specificity](https://github.com/MrOrz/foundation/compare/zurb:master...master#diff-5ad1ec6dd4eb36244de99e0341ae2d55R166) to the selector `.column.#{$size}-centered` in mixin `grid-html-classes($size)`, in order to balance out the floating behavior.

4. `.#{$size}-uncentered` should cancel out `.#{<previous-sizes>}-centered` (e.g. `.small-centered` should be canceled out by `.large-centered`). We added some [more selectors to achieve that](https://github.com/MrOrz/foundation/compare/zurb:master...master#diff-5ad1ec6dd4eb36244de99e0341ae2d55R173).