update responsive grid system

2 files changed, 71 insertions, 38 deletions

diff --git a/src/forms.less b/src/forms.less
index 996056c..fd85f2c 100644
--- a/src/forms.less
+++ b/src/forms.less
@@ -2,29 +2,39 @@
 .form-group:not(:last-child) {
   margin-bottom: 1rem;
 }
-.form-horizontal {
-  padding: 1rem;
 
-  .col-12,
-  .col-11,
-  .col-10,
-  .col-9,
-  .col-8,
-  .col-7,
-  .col-6,
-  .col-5,
-  .col-4,
-  .col-3,
-  .col-2,
-  .col-1 {
-    float: left;
-  }
-  .form-label {
-    padding: .8rem .4rem;
+@media screen and (min-width: 841px) {
+  .form-horizontal {
+    padding: 1rem;
+
+    .form-group {
+      display: flex;
+    }
+    .form-label {
+      padding: .8rem .4rem;
+    }
+    .form-checkbox,
+    .form-radio {
+      margin: .5rem 0;
+    }
   }
-  .form-checkbox,
-  .form-radio {
-    margin: .5rem 0;
+}
+@media screen and (max-width: 840px) {
+  .form-horizontal {
+    .col-12,
+    .col-11,
+    .col-10,
+    .col-9,
+    .col-8,
+    .col-7,
+    .col-6,
+    .col-5,
+    .col-4,
+    .col-3,
+    .col-2,
+    .col-1 {
+      width: 100%;
+    }
   }
 }
 // Form element: Input boxes
diff --git a/src/layout.less b/src/layout.less
index ccdd609..9c6a4e5 100644
--- a/src/layout.less
+++ b/src/layout.less
@@ -22,7 +22,9 @@
   }
 }
 
+// Responsive grid system
 .columns {
+  display: block;
   margin-left: -1rem;
   margin-right: -1rem;
   &:extend(.clearfix all);
@@ -30,27 +32,26 @@
 .column {
   flex: 1;
   padding: 1rem;
+
+  &.col-12,
+  &.col-11,
+  &.col-10,
+  &.col-9,
+  &.col-8,
+  &.col-7,
+  &.col-6,
+  &.col-5,
+  &.col-4,
+  &.col-3,
+  &.col-2,
+  &.col-1 {
+    flex: none;
+  }
 }
-@media screen and (min-width: 769px) {
+@media screen and (min-width: 841px) {
   .columns {
     display: flex;
   }
-  .column {
-    &.col-12,
-    &.col-11,
-    &.col-10,
-    &.col-9,
-    &.col-8,
-    &.col-7,
-    &.col-6,
-    &.col-5,
-    &.col-4,
-    &.col-3,
-    &.col-2,
-    &.col-1 {
-      flex: none;
-    }
-  }
   .col-12 {
     width: 100%;
   }
@@ -88,6 +89,28 @@
     width: 8.33333333%;
   }
 }
+@media screen and (min-width: 481px) and (max-width: 840px) {
+  .columns {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .col-12 {
+    width: 100%;
+  }
+  .col-11,
+  .col-10,
+  .col-9,
+  .col-8,
+  .col-7,
+  .col-6,
+  .col-5,
+  .col-4,
+  .col-3,
+  .col-2,
+  .col-1 {
+    width: 50%;
+  }
+}
 
 // Responsive breakpoint system
 @media screen and (max-width: 480px) {