Start by adding an element with a class of .grid. This will create a horizontal block to contain vertical columns. Then add elements with a .grid__col class within that row. Specify the widths of each column with .grid__col--xs-#, .grid__col--sm-#, .grid__col--md-# and .grid__col--lg-# classes. Responsive modifiers enable specifying different column sizes, offsets, alignment and distribution at xs, sm, md & lg viewport widths. Bare in mind that the layout is mobile-first, it has 24 columns without gutter. You can stack modifiers if you want to achieve different alignment depending on screen size.
You can reverse order by using .grid--reverse-# modifier or control column directly via .grid__col--first-# (example below) or .grid__col--last-#. Reset the order rule by using .grid__col--original-#.
<div class="grid " style=''>
<div class="grid__col grid__col--sm-12">
<div class="sg-box">first in DOM, but second from md screen size</div>
</div>
<div class="grid__col grid__col--sm-12 grid__col--first-md">
<div class="sg-box">second in DOM, but first from md screen size</div>
</div>
</div>
{
"language": "en-US",
"columns": [
{
"class": "grid__col--sm-12",
"text": "first in DOM, but second from md screen size"
},
{
"class": "grid__col--sm-12 grid__col--first-md",
"text": "second in DOM, but first from md screen size"
}
]
}