Watch it changing for <span class="docs-grid-text-tiny">tiny</span>,
<span class="docs-grid-text-small">small</span>,
<span class="docs-grid-text-medium">medium</span>,
<span class="docs-grid-text-large">large</span>,
<span class="docs-grid-text-xlarge">xlarge</span>,
<span class="docs-grid-text-2xlarge">2xlarge</span> and
<span class="docs-grid-text-3xlarge">3xlarge</span> widths!

<p class="nx-margin-y-xs">
    The last two columns are also aligned differently depending on the window
    size.
</p>

<div nxLayout="grid" class="docs-grid-colored-grid">
    <div nxRow>
        <div nxCol="12,3" class="docs-grid-colored-col">
            <strong>3</strong> on all devices except tier tiny (<span
                class="docs-grid-text-tiny"
                >12</span
            >)
        </div>
        <div nxCol="12,6,3" class="docs-grid-colored-col">
            <strong>3</strong> on all devices except tier tiny (<span
                class="docs-grid-text-tiny"
                >12</span
            >) and small (<span class="docs-grid-text-small">6</span>)
        </div>
        <div nxCol="12,6,3" class="docs-grid-colored-col">
            <strong>3</strong> on all devices except tier tiny (<span
                class="docs-grid-text-tiny"
                >12</span
            >) and small (<span class="docs-grid-text-small">6</span>)
        </div>
        <div nxCol="12,6,4,2" class="docs-grid-colored-col">
            This column is <strong>2</strong> by default and shrinks down to
            <span class="docs-grid-text-medium">4</span>,
            <span class="docs-grid-text-small">6</span>,
            <span class="docs-grid-text-tiny">12</span>.
        </div>
    </div>
</div>