responsive auto margin classes

diff --git a/scss/utilities/_spacing.scss b/scss/utilities/_spacing.scss
index 1f0d77ff096ac92da730166e50ee84af335c3450..8750bb65b6651781a5df9567f81aad06f412d999 100644 (file)
--- a/scss/utilities/_spacing.scss
+++ b/scss/utilities/_spacing.scss
@@ -15,14 +15,6 @@
 
 // Margin and Padding
 
-.mx-auto {
-  margin-right: auto !important;
-  margin-left:  auto !important;
-}
-
-.mr-auto { margin-right: auto !important; }
-.ml-auto { margin-left: auto !important; }
-
 @each $breakpoint in map-keys($grid-breakpoints) {
   @each $prop, $abbrev in (margin: m, padding: p) {
     @each $size, $lengths in $spacers {
@@ -48,6 +40,19 @@
       }
     }
   }
+
+  // Some special margin utils
+  @include media-breakpoint-up($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+    .mx#{$infix}-auto {
+      margin-right: auto !important;
+      margin-left:  auto !important;
+    }
+    .mt#{$infix}-auto { margin-top: auto !important; }
+    .mr#{$infix}-auto { margin-right: auto !important; }
+    .mb#{$infix}-auto { margin-bottom: auto !important; }
+    .ml#{$infix}-auto { margin-left: auto !important; }
+  }
 }
 
 // Positioning