Implementation Example:

<link rel='stylesheet' type='text/css' media='screen' href='CSSGridPro.css'>

<div class="container">
  <div class="row">
    <div class="col col-sm-2 col-4">This is a test</div>
    <div class="col col-sm-2 offset-4 col-4">This is a second test</div>
  </div>
</div>

Non-Defined Columns Demo

.col
.col
.col
.col
.col
.col
.col
.col
.col
.col

Standard Grid Flow Demo

Max Desktop Col:.col-md-12

.col .col-4
.col .offset-4 .col-4
.col .col-4
.col .col-8
.col .col-4
.col .col-4
.col .col-4
.col .col-4
.col .col-4
.col .col-4
.col .col-2
.col .col-2 .offset-2
.col .col-2 .offset-2

Tablet Modified Flow Demo

Max Tablet Col:.col-md-6

.col .col-md-6 .col-4
.col .col-md-4 .offset-4 .col-4
.col .col-md-6 .col-4
.col .col-md-6 .col-8
.col .col-md-3 .col-4
.col .col-md-3 .col-4
.col .col-md-6 .col-4

Mobile Modified Flow Demo

Max Mobile Col:.col-sm-4

.col .col-sm-2 .col-4
.col .col-sm-2 offset-4 .col-4
.col .col-sm-2 .col-4
.col .col-sm-2 .col-8
.col .col-sm-1 .col-md-3 .col-3
.col .col-sm-1 .col-md-3 .col-3
.col .col-sm-1 .col-md-3 .col-3
.col .col-sm-1 .col-md-3 .col-3

Fluid Demo

Max Mobile Col:.col-sm-4

.col .col-sm-2 .col-4
.col .col-sm-2 .offset-4 .col-4