A grid layout which has 2 stacked sections for mobile which switch to columns aligned on the left or right for desktop.
<div class="u-grid u-gap u-grid-cols-2-@bp3">
<div class="u-grid-col-2-@bp3 u-grid-row-1-@bp3">
<div class="u-bg-primary u-radius u-h-100% u-flex u-align-middle u-tc-white u-p">Primary Column</div>
</div>
<div class="u-grid-col-1-@bp3">
<div class="u-bg-ui-100 u-radius u-flex u-align-middle u-p">1</div>
</div>
<div>
<div class="u-bg-ui-50 u-radius u-flex u-align-middle u-p">2</div>
</div>
<div>
<div class="u-bg-ui-50 u-radius u-flex u-align-middle u-p">3</div>
</div>
</div>A grid layout which has 3 stacked sections for mobile with a primary section in the middle (the sandwich), and expands to 2 columns with the primary section on the right for tablet/desktop.
<div class="u-grid u-gap u-grid-cols-2-@bp3 u-grid-rows-auto/1fr">
<div class="u-grid-row-1">
<div class="u-bg-ui-100 u-radius u-flex u-align-middle u-p">1</div>
</div>
<div class="u-grid-row-span-2-@bp3 u-grid-col-2-@bp3">
<div class="u-bg-primary u-radius u-h-100% u-flex u-align-middle u-tc-white u-p">Ham</div>
</div>
<div class="u-grid-row-2/3-@bp3">
<div class="u-bg-ui-100 u-radius u-flex u-align-middle u-p">2</div>
</div>
</div><div class="u-grid u-gap u-grid-cols-2-@bp3">
<div class="u-grid-row-1-@bp3 u-grid-col-2-@bp3">
<div class="u-bg-ui-100 u-radius u-flex u-align-middle u-p">1</div>
</div>
<div class="u-grid-row-span-2-@bp3 u-grid-col-1-@bp3 u-grid-row-1-@bp3">
<div class="u-bg-primary u-radius u-h-100% u-flex u-align-middle u-tc-white u-p">Ham</div>
</div>
<div class="u-grid-row-2-@bp3 u-grid-col-2-@bp3">
<div class="u-bg-ui-100 u-radius u-flex u-align-middle u-p">2</div>
</div>
</div>