diff --git a/src/utilities/backgrounds.less b/src/utilities/backgrounds.less
index 2aefe9e65..10025fa96 100644
--- a/src/utilities/backgrounds.less
+++ b/src/utilities/backgrounds.less
@@ -22,7 +22,7 @@
 .bg-overlay-soft { background-color: rgba(0,0,0,0.5); }
 .bg-overlay-dark { background-color: rgba(0,0,0,0.75); }
 
-.generate-responsive-versions({
+.responsive({
   &bg-light { .bg-light; }
   &bg-light-soft { .bg-light-soft; }
   &bg-light-softer { .bg-light-softer; }
diff --git a/src/utilities/misc.less b/src/utilities/misc.less
index 3262bc6bd..6e47b9d7c 100644
--- a/src/utilities/misc.less
+++ b/src/utilities/misc.less
@@ -1,24 +1,3 @@
-.screen-sm(@ruleset) { @media (min-width: @screen-sm) { @ruleset(); }}
-.screen-md(@ruleset) { @media (min-width: @screen-md) { @ruleset(); }}
-.screen-lg(@ruleset) { @media (min-width: @screen-lg) { @ruleset(); }}
-.screen-xl(@ruleset) { @media (min-width: @screen-xl) { @ruleset(); }}
-
-.responsive(@ruleset) {
-  .screen-sm({ .sm\: { @ruleset(); }});
-  .screen-md({ .md\: { @ruleset(); }});
-  .screen-lg({ .lg\: { @ruleset(); }});
-  .screen-xl({ .xl\: { @ruleset(); }});
-}
-
-.generate-responsive-versions(@ruleset; @i: 1) when (@i <= length(@screens)) {
-  @screen: extract(@screens, @i);
-  @name: extract(@screen, 1);
-  @screen-width: extract(@screen, 3);
-
-  .generate-responsive-version(@ruleset, @name, @screen-width);
-  .generate-responsive-versions(@ruleset, @i + 1);
-}
-
 .generate-responsive-version(@ruleset, @screen, @min-width) {
   @prefix: ~"@{screen}\:";
 
@@ -27,6 +6,15 @@
   }
 }
 
+.responsive(@ruleset; @i: 1) when (@i <= length(@screens)) {
+  @screen: extract(@screens, @i);
+  @name: extract(@screen, 1);
+  @screen-width: extract(@screen, 2);
+
+  .generate-responsive-version(@ruleset, @name, @screen-width);
+  .responsive(@ruleset, @i + 1);
+}
+
 .no-focus {
   &:focus, &:active {
     outline: none;