Add classes to align elements to the start or end of a row as well as the top, bottom, or center of a column
<div class="row _top">
<div class="col-6">
<div class="box">1</div>
<div class="box">1</div>
<div class="box">1</div>
</div>
<div class="col-6">
<div class="box">2</div>
</div>
</div>
<div class="row _middle">
<div class="col-6">
<div class="box">1</div>
<div class="box">1</div>
<div class="box">1</div>
</div>
<div class="col-6">
<div class="box">2</div>
</div>
</div>
<div class="row _bottom">
<div class="col-6">
<div class="box">1</div>
<div class="box">1</div>
<div class="box">1</div>
</div>
<div class="col-6">
<div class="box">2</div>
</div>
</div>
Different alignment for different resizes, resize the window to view it on action.
<div class="row _top-l row _bottom-m row _middle-s">
<div class="col-6">
<div class="box">1</div>
<div class="box">1</div>
<div class="box">1</div>
</div>
<div class="col-6">
<div class="box">2</div>
</div>
</div>