Gumby "semantic" columns

test.scss

section{
  @include row();
  article{
    @include column(6);  
    background: none repeat scroll 0 0 #FF0000;
  }
  @include respond(tablets){  
    article{
      width:100%;
      margin-left: 0;
      background: none repeat scroll 0 0 #0000FF;
    }
  }
  @include respond(all-phones){
     > *:first-child {
          margin-left: 0;
      }
    &:before,&:after{
      content: "";
      display: table;
    } 
    &:after{
      clear: both;
    }
    article{
      -moz-box-sizing: border-box;
      float: left;
      margin-left: 2.12766%;
      min-height: 1px;
      position: relative;
      background: none repeat scroll 0 0 #0000FF;
      width: 48.9362%;
    }
  }
}