The logic is the following:

<ul class="Vlt-list Vlt-list--simple">
<li><code>.Vlt-col</code> is needed in every case but it only inlines content on <b>L</b> screens</li>
<li><code>.Vlt-col(--1of2/--1of3...)</code> work only on <b>L</b> screens and stack on <b>M</b> and <b>S</b></li>
<li><code>.Vlt-col--<b>M</b>(-1of2/-1of3...)</code> work only on <b>M</b> screens</li>
<li><code>.Vlt-col--<b>S</b>(-1of2/-1of3...)</code> work only on <b>S</b> screens</li>
<li><code>.Vlt-col--<b>A</b>(-1of2/-1of3...)</code> work on <b>ALL</b> screens</li>
</ul>

If `--M` or `--S` is not declared, the columns will gracefully stack (unless you use `Vlt-grid--stack-flush`, see sidenav) and a bit of vertical margin is added between them to make sure nothing is touching when it shouldn't.

In the following examples you'll see 4 columns on large, 3 columns on medium, 2 columns on small screens. On mobile screens there's no vertical margin between the columns: that is because they have a declared mobile behaviour (`.Vlt-col--S-1of2`) hence we don't intervene.