12 column, mobile-up, responsive grid, with offsetting

12col.css

.row {clear:both; margin:0; width:100%;}
.container {position:relative; margin:0 auto; padding:0 1.5em; max-width:1280px;}
.col {margin-bottom:1em; width:100%;}

@media only screen and (min-width:768px) {
  .col {float:left; margin-right:2%;}
  .col:last-child {margin-right:0;}
  
  .grid-1 {width:6.5%;}
  .grid-2 {width:15.0%;}
  .grid-3 {width:23.5%;}
  .grid-4 {width:32.0%;}
  .grid-5 {width:40.5%;}
  .grid-6 {width:49.0%;}
  .grid-7 {width:57.5%;}
  .grid-8 {width:66.0%;}
  .grid-9 {width:74.5%;}
  .grid-10 {width:83.0%;}
  .grid-11 {width:91.5%;}
  .grid-12 {margin-right:0; width:100%;}
  
  .offset-1 {margin-left:8.5%;}
  .offset-2 {margin-left:17.0%;}
  .offset-3 {margin-left:25.5%;}
  .offset-4 {margin-left:34.0%;}
  .offset-5 {margin-left:42.5%;}
  .offset-6 {margin-left:51.0%;}
  .offset-7 {margin-left:59.5%;}
  .offset-8 {margin-left:68.0%;}
  .offset-9 {margin-left:76.5%;}
  .offset-10 {margin-left:85.0%;}
  .offset-11 {margin-left:93.5%;}
}