Offset

Using offset to shift element.

Syntax:
col(width, offset: +/-ratio)

+ve shift to the right
-ve shift to the left
Cycle and Uncycle

When there is overflow of content in a row, the next element is brought
down to the next row. However, instead of one element is brought forward
to the next row, there are two elements will be brought down. This is
due to the way that each element has an assigned right margin to it.

To counter this, we need to define cycle inside col mixin:

col(1/4, cycle: 4)

When doing responsive design, we need to uncycle what we have
done->cycle before page break so that the each floated elements will
flow properly to the next row.

@media (max-width: 600px)
col(1/3, cycle: 3, uncycle: 4)