<div class="flex-container flex-container--row-gap">
  <div class="flex-item flex-2-of-12">2-of-12 for all</div>
  <div class="flex-item flex-2-of-12">2-of-12 for all</div>
  <div class="flex-item flex-2-of-12">2-of-12 for all</div>
  <div class="flex-item flex-2-of-12">2-of-12 for all</div>
  <div class="flex-item flex-2-of-12">2-of-12 for all</div>
  <div class="flex-item flex-2-of-12">2-of-12 for all</div>
</div>

<div class="flex-container flex-container--row-gap">
  <div class="flex-item flex-sm-2-of-12">2-of-12 for sm up</div>
  <div class="flex-item flex-sm-2-of-12">2-of-12 for sm up</div>
  <div class="flex-item flex-sm-2-of-12">2-of-12 for sm up</div>
  <div class="flex-item flex-sm-2-of-12">2-of-12 for sm up</div>
  <div class="flex-item flex-sm-2-of-12">2-of-12 for sm up</div>
  <div class="flex-item flex-sm-2-of-12">2-of-12 for sm up</div>
</div>

<div class="flex-container flex-container--row-gap">
  <div class="flex-item flex-md-2-of-12">2-of-12 for md up</div>
  <div class="flex-item flex-md-2-of-12">2-of-12 for md up</div>
  <div class="flex-item flex-md-2-of-12">2-of-12 for md up</div>
  <div class="flex-item flex-md-2-of-12">2-of-12 for md up</div>
  <div class="flex-item flex-md-2-of-12">2-of-12 for md up</div>
  <div class="flex-item flex-md-2-of-12">2-of-12 for md up</div>
</div>

<div class="flex-container flex-container--row-gap">
  <div class="flex-item flex-lg-2-of-12">2-of-12 for lg up</div>
  <div class="flex-item flex-lg-2-of-12">2-of-12 for lg up</div>
  <div class="flex-item flex-lg-2-of-12">2-of-12 for lg up</div>
  <div class="flex-item flex-lg-2-of-12">2-of-12 for lg up</div>
  <div class="flex-item flex-lg-2-of-12">2-of-12 for lg up</div>
  <div class="flex-item flex-lg-2-of-12">2-of-12 for lg up</div>
</div>

<div class="flex-container flex-container--row-gap">
  <div class="flex-item flex-xl-2-of-12">2-of-12 for xl up</div>
  <div class="flex-item flex-xl-2-of-12">2-of-12 for xl up</div>
  <div class="flex-item flex-xl-2-of-12">2-of-12 for xl up</div>
  <div class="flex-item flex-xl-2-of-12">2-of-12 for xl up</div>
  <div class="flex-item flex-xl-2-of-12">2-of-12 for xl up</div>
  <div class="flex-item flex-xl-2-of-12">2-of-12 for xl up</div>
</div>

<div class="flex-container flex-container--row-gap">
  <div class="flex-item flex-2xl-2-of-12">2-of-12 for 2xl up</div>
  <div class="flex-item flex-2xl-2-of-12">2-of-12 for 2xl up</div>
  <div class="flex-item flex-2xl-2-of-12">2-of-12 for 2xl up</div>
  <div class="flex-item flex-2xl-2-of-12">2-of-12 for 2xl up</div>
  <div class="flex-item flex-2xl-2-of-12">2-of-12 for 2xl up</div>
  <div class="flex-item flex-2xl-2-of-12">2-of-12 for 2xl up</div>
</div>


<div class="flex-container flex-container--row-gap">
  <div class="flex-item flex-4-of-12">4-of-12 for all</div>
  <div class="flex-item flex-4-of-12">4-of-12 for all</div>
  <div class="flex-item flex-4-of-12">4-of-12 for all</div>
</div>

<div class="flex-container flex-container--row-gap">
  <div class="flex-item flex-sm-4-of-12">4-of-12 for sm up</div>
  <div class="flex-item flex-sm-4-of-12">4-of-12 for sm up</div>
  <div class="flex-item flex-sm-4-of-12">4-of-12 for sm up</div>
</div>

<div class="flex-container flex-container--row-gap">
  <div class="flex-item flex-md-4-of-12">4-of-12 for md up</div>
  <div class="flex-item flex-md-4-of-12">4-of-12 for md up</div>
  <div class="flex-item flex-md-4-of-12">4-of-12 for md up</div>
</div>

<div class="flex-container flex-container--row-gap">
  <div class="flex-item flex-lg-4-of-12">4-of-12 for lg up</div>
  <div class="flex-item flex-lg-4-of-12">4-of-12 for lg up</div>
  <div class="flex-item flex-lg-4-of-12">4-of-12 for lg up</div>
</div>

<div class="flex-container flex-container--row-gap">
  <div class="flex-item flex-xl-4-of-12">4-of-12 for xl up</div>
  <div class="flex-item flex-xl-4-of-12">4-of-12 for xl up</div>
  <div class="flex-item flex-xl-4-of-12">4-of-12 for xl up</div>
</div>

<div class="flex-container flex-container--row-gap">
  <div class="flex-item flex-2xl-4-of-12">4-of-12 for 2xl up</div>
  <div class="flex-item flex-2xl-4-of-12">4-of-12 for 2xl up</div>
  <div class="flex-item flex-2xl-4-of-12">4-of-12 for 2xl up</div>
</div>
