...
| Col No. | xxs ( < 480px ) | xs ( < 768px ) | sm ( < 992px ) | md ( < 1200px ) | lg ( >=1200 ) |
|---|---|---|---|---|---|
| 1 | .xs-lower-one-col | .xs-lower-one-col | |||
| 2 | .xs-lower-two-col | .xs-lower-two-col | |||
| 3 | .xs-lower-three-col | .xs-lower-three-col | |||
| 4 |
In the table above you can see the panel sizes starting from xxs, up to lg.
The predefined classes xs-lower-one-col, xs-lower-two-col, xs-lower-three-col when applied to block level containers will change the grid-column-template to the given number.
For example xs-lower-one-col class applied on a 4 column block, will change that block to 2 columns layout starting at xs size, so both xs and xxs sizes will change the block to a 2 column layout.
SASS Mixins:
A mixin allows you to make groups of CSS declarations that you can reuse throughout your application. You can even pass in values to make your mixin more flexible.
...