responsive almost done

assets/css/base/_grid-flex.scss

@@ -6,11 +6,9 @@
   flex-direction: row;
   flex-wrap: nowrap;
   align-items: stretch;
-  // &:after{
-  //   content:"";
-  //   clear:both;
-  //   display: block;
-  // }
+  @media only screen and (max-width: $small-bp) {
+    flex-wrap:wrap;
+  }
 }
 
 .row{

assets/css/base/_layout.scss

@@ -27,19 +27,27 @@ body{
     flex: 0 0 auto;
     @extend %layout-element;
     padding:1em $side-padding 0 $side-padding;
+    @media only screen and (max-width: $small-bp) {
+      padding:1em $side-padding/2 0 $side-padding/2;
+    }
   }
   section[role="main-content"]{
     flex:1 1 auto;
     @extend %layout-element;
     overflow: hidden;
     >.wrapper{
+      position: relative;
       padding:0 $side-padding 0 $side-padding;
       height:100%; max-height:100%;
       overflow-y: hidden;
       overflow-x: hidden;
+      @media only screen and (max-width: $small-bp) {
+        overflow-y: auto;
+        padding:0 $side-padding/2 0 $side-padding/2;
+      }
     }
     .main-content-layout{
-      max-height: 100%;
+      height: 100%;
       >header,
       >section,
       >nav{
@@ -54,6 +62,12 @@ body{
         overflow-y: auto;
       }
     }
+    @media only screen and (max-width: $small-bp) {
+      .main-content-layout{
+        display: flex;
+        flex-direction: column;
+      }
+    }
   }
   footer[role="tools"]{
     flex:0 0 auto;