Flex columns

<div class="flex-grid">
  <div class="col-xs">
    <h4>2 Column</h4>
  </div>
  <div class="col-xs">
    <h4>Magic</h4>
  </div>
</div>

Columns will change depending on how many you add.

Preview

4

Column

Magic

:D

3

Column

Magic

2 Column

Magic

Kinda explains itself at this point...

Flex columns 1-12

<div class="flex-grid">
  <div class="col-xs-4">
    <h4>Column</h4>
  </div>
  <div class="col-xs-8">
    <h4>Magic</h4>
  </div>
</div>


Coulumn

Magic

Basically, in this example, 4 + 8 = 12. You can add as many as you desire to one line, as long as all columns equals 12


Manual columns

<div class="row">
  <div class="one-half column">
    <h4>2 Column</h4>
  </div>
  <div class="one-half column">
    <h4>Magic</h4>
  </div>
</div>

Column choices:

Preview

4

Column

Magic

:D

2 Column

Magic

Kinda explains itself at this point...