diff --git a/src/components/mdLayout/mdLayout.scss b/src/components/mdLayout/mdLayout.scss
index 1e959db..0582056 100644
--- a/src/components/mdLayout/mdLayout.scss
+++ b/src/components/mdLayout/mdLayout.scss
@@ -1,19 +1,34 @@
 @import '../../core/stylesheets/variables.scss';
 @import '../../core/stylesheets/mixins.scss';
 
+
+/* Rows and Columns */
+
 .md-layout {
   display: flex;
   flex-direction: row;
   flex: 1;
 }
 
-.md-row {
-  flex-direction: row;
+@mixin layout($size: null) {
+  @if $size == null {
+    $size : '';
+  }
+
+  @if $size != '' {
+    $size : '-#{$size}';
+  }
+
+  .md-row#{$size} {
+    flex-direction: row;
+  }
+
+  .md-column#{$size} {
+    flex-direction: column;
+  }
 }
 
-.md-column {
-  flex-direction: column;
-}
+@include layout();
 
 
 /* Gutter Size */
@@ -84,19 +99,12 @@ $sizes: (8, 16, 24, 40);
 /* Responsive Breakpoints */
 
 @mixin breakpoint-layout($size) {
-  .md-column-#{$size} {
-    flex-direction: column;
-  }
-
-  .md-row-#{$size} {
-    flex-direction: row;
-  }
+  @include layout($size);
+  @include layout-flex($size);
 
   .md-hide-#{$size} {
     display: none;
   }
-
-  @include layout-flex($size);
 }
 
 @include layout-xlarge {
diff --git a/src/components/mdLayout/mdLayout.vue b/src/components/mdLayout/mdLayout.vue
index c1c068f..b85ef43 100644
--- a/src/components/mdLayout/mdLayout.vue
+++ b/src/components/mdLayout/mdLayout.vue
@@ -67,7 +67,7 @@
           }
         }
 
-        this.generateFlexClasses(null, 'mdFlex', classes);
+        this.generateFlexClasses('', 'mdFlex', classes);
         this.generateFlexClasses('xsmall', 'mdFlexXsmall', classes);
         this.generateFlexClasses('small', 'mdFlexSmall', classes);
         this.generateFlexClasses('medium', 'mdFlexMedium', classes);