diff --git a/scss/_mixins.scss b/scss/_mixins.scss
index 45d5ec1448..175d3ae26f 100644
--- a/scss/_mixins.scss
+++ b/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%;
       }
     }
   }
diff --git a/test/html/grid.html b/test/html/grid.html
index f168ce207d..0a3e937ff4 100644
--- a/test/html/grid.html
+++ b/test/html/grid.html
@@ -89,7 +89,7 @@
       <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 @@
       </div>
 
       <div class="row responsive-lg">
-        <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
-          </div>
-        </div>
-        <div class="col">
-          <div>
-            .responsive-lg .col
+            .responsive-lg .col.col-25
           </div>
         </div>
       </div>