fix(grid): Correct responsive grid breaks for col-XX, closes #803

Author: adamdbradley

scss/_mixins.scss

@@ -619,9 +619,11 @@
       -ms-flex-direction: column;
       flex-direction: column;
 
-      .col {
-        width: 100%;
+      .col, .col-10, .col-20, .col-25, .col-33, .col-34, .col-50, .col-66, .col-67, .col-75, .col-80, .col-90 {
+        @include flex(1);
         margin-bottom: ($grid-padding-width * 3) / 2;
+        max-width: 100%;
+        width: 100%;
       }
     }
   }

test/html/grid.html

@@ -89,7 +89,7 @@ <h3>.row</h3>
       <div class="row">
         <div class="col col-25">
           <div>
-            .col.col-25 
+            .col.col-25
           </div>
         </div>
         <div class="col col-25 col-offset-25">
@@ -261,24 +261,19 @@ <h3>.row</h3>
       </div>
 
       <div class="row responsive-lg">
-        <div class="col">
-          <div>
-            .responsive-lg .col
-          </div>
-        </div>
-        <div class="col">
+        <div class="col col-50">
           <div>
-            .responsive-lg .col
+            .responsive-lg .col.col-50
           </div>
         </div>
-        <div class="col">
+        <div class="col col-25">
           <div>
-            .responsive-lg .col
+            .responsive-lg .col.col-25
           </div>
         </div>
-        <div class="col">
+        <div class="col col-25">
           <div>
-            .responsive-lg .col
+            .responsive-lg .col.col-25
           </div>
         </div>
       </div>