Layouts

<div class="row">
  <div class="col span-1">1</div>
  <div class="col span-11">11</div>
  <div class="col span-2">2</div>
  <div class="col span-10">10</div>
  <div class="col span-3">3</div>
  <div class="col span-9">9</div>
  <div class="col span-4">4</div>
  <div class="col span-8">8</div>
  <div class="col span-5">5</div>
  <div class="col span-7">7</div>
  <div class="col span-6">6</div>
  <div class="col span-6">6</div>
</div>

<div class="row">
  <div class="col d-span-3 t-span-6 m-span-12">col</div>
  <div class="col d-span-3 t-span-6 m-span-12">col</div>
  <div class="col d-span-3 t-span-6 m-span-12">col</div>
  <div class="col d-span-3 t-span-6 m-span-12">col</div>
</div>

<div class="d-f">
  <div class="flex">Flex</div>
  <div>No Flex</div>
</div>
<div class="d-f">
  <div class="flex-1">Flex 1</div>
  <div class="flex-2">Flex 2</div>
</div>
<div class="d-f">
  <div class="flex-1">Flex 1</div>
  <div class="flex-4">Flex 4</div>
</div>

<div class="d-f">
  <div class="d-flex-3 t-flex-1 m-flex-0">Col</div>
  <div class="d-flex-1 t-flex-3 m-flex-0">Col</div>
</div>