The colums system is pretty straight-forward: if you can a big column, you use the column-big class.
<div class="row">
<div class="column-tiny" style="background-color: #e6ee9c;">
<p>Tiny one</p>
</div>
<div class="column-big" style="background-color: #9fa8da;">
<p>Big column</p>
</div>
</div>
<div class="row">
<div class="column-medium" style="background-color: #bcaaa4;">
<p>Medium column</p>
</div>
<div class="column-medium" style="background-color: #a5d6a7;">
<p>Medium column</p>
</div>
</div>
<div class="row">
<div class="column-large" style="background-color: #81d4fa;">
<p>Large column</p>
</div>
<div class="column-small" style="background-color: #b39ddb;">
<p>Small column</p>
</div>
</div>
<div class="row">
<div class="column-full" style="background-color: #f48fb1;">
<p>Full-width column</p>
</div>
</div>
This code will give the following result:
Tiny one
Big column
Medium column
Medium column
Large column
Small column
Full-width column
You can use the column system anywhere: in a container, in a card…