The standard 12-column grid provided by Bootstrap is alive & well and empowers us to easily create mobile-first layouts with sensible defaults across many different device-sizes. Please refer to the documentation for the finer points of manipulating columns and grid sizes.
Rather than use the clunky, non-semantic grid selectors like
.col-xs-*, etc. to manipulate your columns, it is preferable to encapsulate this logic in your scss files using the provided mixins.
DON’T do this…
Do this, instead…
The above, recommended approach decouples the presentational markup from the page structure, which allows for more flexibility across breakpoints and easier long-term maintenance. The entire list of grid-specific mixins provided by
crds-styles can be viewed on Github.