update responsive grid system

1 files changed, 31 insertions, 21 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