In case you need some responsive grid functionality, you need to use the responsive grid classes additionally. The best practice is to use the general `.sc-grid-col-*` class first and override it, depending on your needs with the necessary viewport specific grid class `.sc-grid-col-*-*`.
Always keep in mind, that smaller viewport grid classes override bigger ones.
Grid column classes
device min-width
device max-width
`.sc-grid-col-*` (default)
`.sc-grid-col-xl-*`
1100px
∞
`.sc-grid-col-l-*`
1099px
`.sc-grid-col-m-*`
1023px
`.sc-grid-col-s-*`
767px
`.sc-grid-col-xs-*`
320px
With the responsive grid column classes, you are able to set the column width in dependency to the viewport. For example, if you define a grid with the classes `sc-grid-col-4 sc-grid-col-m-6 sc-grid-col-s-12` it will be 4 columns wide on devices larger than M-Viewport, 6 columns wide on devices with M-Viewport and 12 columns wide in devices with S-Viewport.
You can simply check the behavior of the grid by resizing the current page.