use breakpoints

Author: kenold

src/styles/grid.scss

@@ -1,18 +1,39 @@
 // Display 1 column on mobile, 1 column on desktop
-.show-1-1 {
-    flex-basis: 100%;
-}
-.show-1-2 {
-    flex-basis: 100%;
-}
-.show-1-3 {
-    flex-basis: 100%;
-}
-.show-1-4 {
-    flex-basis: 100%;
+.sm {
+    &-show-1-1 {
+        flex-basis: 100%;
+    }
+    &-show-1-2 {
+        flex-basis: 100%;
+    }
+    &-show-1-3 {
+        flex-basis: 100%;
+    }
+    &-show-1-4 {
+        flex-basis: 100%;
+    }
+    &-show-2-4 {
+        flex: 0 1 calc(50% - .5rem);
+    }
 }
-.show-2-4 {
-    flex: 0 1 calc(50% - .5rem);
+@media (min-width: 576px) {
+    .md {
+        &-show-1-1 {
+            flex-basis: 100%;
+        }
+        &-show-1-2 {
+            flex-basis: 100%;
+        }
+        &-show-1-3 {
+            flex-basis: 100%;
+        }
+        &-show-1-4 {
+            flex-basis: 100%;
+        }
+        &-show-2-4 {
+            flex: 0 1 calc(50% - .5rem);
+        }
+    }
 }
 
 @media (min-width: 768px) {