diff --git a/scss/_grid.scss b/scss/_grid.scss
index d60f35d6b7..de2b18c5fa 100644
--- a/scss/_grid.scss
+++ b/scss/_grid.scss
@@ -123,27 +123,12 @@
}
-/* Responsive Grid Attribute */
-/* Adding a class of responsive to a row */
+/* Responsive Grid Classes */
+/* Adding a class of responsive-X 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;
- }
-}
\ No newline at end of file
+@include responsive-grid-break('.responsive-sm', $grid-responsive-sm-break);
+@include responsive-grid-break('.responsive-md', $grid-responsive-md-break);
+@include responsive-grid-break('.responsive-lg', $grid-responsive-lg-break);
diff --git a/scss/_mixins.scss b/scss/_mixins.scss
index 66ca41a4e1..e06c9af717 100644
--- a/scss/_mixins.scss
+++ b/scss/_mixins.scss
@@ -589,3 +589,22 @@
-moz-justify-content: $value;
justify-content: $value;
}
+
+@mixin responsive-grid-break($selector, $max-width) {
+ @media (max-width: $max-width) {
+ #{$selector} {
+ -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;
+
+ .col {
+ width: 100%;
+ margin-bottom: ($grid-padding-width * 3) / 2;
+ }
+ }
+ }
+}
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 008d57ae80..26229a2d3a 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -495,7 +495,9 @@ $modal-bg-color: #fff !default;
// -------------------------------
$grid-padding-width: 10px !default;
-$grid-responsive-break: 767px !default;
+$grid-responsive-sm-break: 567px !default; // smaller than landscape phone
+$grid-responsive-md-break: 767px !default; // smaller than portrait tablet
+$grid-responsive-lg-break: 1023px !default; // smaller than landscape tablet
// Action Sheets
diff --git a/test/grid.html b/test/grid.html
index 682f9e44d1..b4b1fff371 100644
--- a/test/grid.html
+++ b/test/grid.html
@@ -215,10 +215,79 @@
+
+
+
+ .responsive-sm .col
+
+
+
+
+ .responsive-sm .col
+
+
+
+
+ .responsive-sm .col
+
+
+
+
+ .responsive-sm .col
+
+
+
+
+
+ .responsive-md .col
+
+
+
+
+ .responsive-md .col
+
+
+
+
+ .responsive-md .col
+
+
+
+
+ .responsive-md .col
+
+
+
+
+
+ .responsive-lg .col
+
+
+
+
+ .responsive-lg .col
+
+
+
+
+ .responsive-lg .col
+
+
+
+
+ .responsive-lg .col
+
+
+