<style>
  .test-Box {
    background: #649632;
    margin-bottom: 10px;
  }
</style>

<div>
  <div class="u-after1of2 test-Box">1of2</div>
</div>
<div>
  <div class="u-after1of3 test-Box">1of3</div>
  <div class="u-after2of3 test-Box">2of3</div>
</div>
<div>
  <div class="u-after1of4 test-Box">1of4</div>
  <div class="u-after2of4 test-Box">2of4</div>
  <div class="u-after3of4 test-Box">3of4</div>
</div>
<div>
  <div class="u-after1of6 test-Box">1of6</div>
  <div class="u-after2of6 test-Box">2of6</div>
  <div class="u-after3of6 test-Box">3of6</div>
  <div class="u-after4of6 test-Box">4of6</div>
  <div class="u-after5of6 test-Box">5of6</div>
</div>
<div>
  <div class="u-after1of8 test-Box">1of8</div>
  <div class="u-after2of8 test-Box">2of8</div>
  <div class="u-after3of8 test-Box">3of8</div>
  <div class="u-after4of8 test-Box">4of8</div>
  <div class="u-after5of8 test-Box">5of8</div>
  <div class="u-after6of8 test-Box">6of8</div>
  <div class="u-after7of8 test-Box">7of8</div>
</div>
<div>
  <div class="u-after1of10 test-Box">1of10</div>
  <div class="u-after2of10 test-Box">2of10</div>
  <div class="u-after3of10 test-Box">3of10</div>
  <div class="u-after4of10 test-Box">4of10</div>
  <div class="u-after5of10 test-Box">5of10</div>
  <div class="u-after6of10 test-Box">6of10</div>
  <div class="u-after7of10 test-Box">7of10</div>
  <div class="u-after8of10 test-Box">8of10</div>
  <div class="u-after9of10 test-Box">9of10</div>
</div>
<div>
  <div class="u-after1of12 test-Box">1of12</div>
  <div class="u-after2of12 test-Box">2of12</div>
  <div class="u-after3of12 test-Box">3of12</div>
  <div class="u-after4of12 test-Box">4of12</div>
  <div class="u-after5of12 test-Box">5of12</div>
  <div class="u-after6of12 test-Box">6of12</div>
  <div class="u-after7of12 test-Box">7of12</div>
  <div class="u-after8of12 test-Box">8of12</div>
  <div class="u-after9of12 test-Box">9of12</div>
  <div class="u-after10of12 test-Box">10of12</div>
  <div class="u-after11of12 test-Box">11of12</div>
</div>

<div>
  <div class="u-before1of2 test-Box">1of2</div>
</div>
<div>
  <div class="u-before1of3 test-Box">1of3</div>
  <div class="u-before2of3 test-Box">2of3</div>
</div>
<div>
  <div class="u-before1of4 test-Box">1of4</div>
  <div class="u-before2of4 test-Box">2of4</div>
  <div class="u-before3of4 test-Box">3of4</div>
</div>
<div>
  <div class="u-before1of6 test-Box">1of6</div>
  <div class="u-before2of6 test-Box">2of6</div>
  <div class="u-before3of6 test-Box">3of6</div>
  <div class="u-before4of6 test-Box">4of6</div>
  <div class="u-before5of6 test-Box">5of6</div>
</div>
<div>
  <div class="u-before1of8 test-Box">1of8</div>
  <div class="u-before2of8 test-Box">2of8</div>
  <div class="u-before3of8 test-Box">3of8</div>
  <div class="u-before4of8 test-Box">4of8</div>
  <div class="u-before5of8 test-Box">5of8</div>
  <div class="u-before6of8 test-Box">6of8</div>
  <div class="u-before7of8 test-Box">7of8</div>
</div>
<div>
  <div class="u-before1of10 test-Box">1of10</div>
  <div class="u-before2of10 test-Box">2of10</div>
  <div class="u-before3of10 test-Box">3of10</div>
  <div class="u-before4of10 test-Box">4of10</div>
  <div class="u-before5of10 test-Box">5of10</div>
  <div class="u-before6of10 test-Box">6of10</div>
  <div class="u-before7of10 test-Box">7of10</div>
  <div class="u-before8of10 test-Box">8of10</div>
  <div class="u-before9of10 test-Box">9of10</div>
</div>
<div>
  <div class="u-before1of12 test-Box">1of12</div>
  <div class="u-before2of12 test-Box">2of12</div>
  <div class="u-before3of12 test-Box">3of12</div>
  <div class="u-before4of12 test-Box">4of12</div>
  <div class="u-before5of12 test-Box">5of12</div>
  <div class="u-before6of12 test-Box">6of12</div>
  <div class="u-before7of12 test-Box">7of12</div>
  <div class="u-before8of12 test-Box">8of12</div>
  <div class="u-before9of12 test-Box">9of12</div>
  <div class="u-before10of12 test-Box">10of12</div>
  <div class="u-before11of12 test-Box">11of12</div>
</div>

<div>
  <div class="u-lap-before1of3 test-Box">1of3 above lap breakpoint</div>
  <div class="u-desk-before1of4 test-Box">1of4 above desk breakpoint</div>
  <div class="u-desk-wide-before1of5 test-Box">1of5 above desk wide breakpoint</div>
</div>