Merge pull request #567 from mhartington/Responsive-Grid

Responsive grid

Author: Adam Bradley

scss/_grid.scss

@@ -121,3 +121,29 @@
   @include flex(0, 0, 90%);
   max-width: 90%;
 }
+
+
+/* Responsive Grid Attribute */
+/* Adding a class of responsive to a row */
+/* will trigger the flex-direction to */
+/* change to column and add some margin */
+/* to any columns in the row for clearity */
+
+/* Adjust the max-width value to fit your own needs */
+/* Defaults to 767px (iPad portrait width)*/
+
+ @media (max-width: $grid-responsive-break) {
+.responsive .col {
+  width: 100%;
+  margin-bottom:15px;
+    }
+.responsive {
+  -webkit-box-direction: normal;
+  -moz-box-direction: normal;
+  -webkit-box-orient: vertical;
+  -moz-box-orient: vertical;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+    }
+}

scss/_variables.scss

@@ -495,6 +495,7 @@ $modal-bg-color:              #fff !default;
 // -------------------------------
 
 $grid-padding-width:           10px !default;
+$grid-responsive-break:        767px !default;
 
 
 // Action Sheets