diff --git a/scss/helpers/_visually-hidden.scss b/scss/helpers/_visually-hidden.scss
index 4760ff03d1..08477e39c1 100644
--- a/scss/helpers/_visually-hidden.scss
+++ b/scss/helpers/_visually-hidden.scss
@@ -6,3 +6,20 @@
 .visually-hidden-focusable:not(:focus):not(:focus-within) {
   @include visually-hidden();
 }
+
+// Responsive visually hidden utilities
+//
+// Generates `.visually{-breakpoint}-hidden` classes that apply the
+// `visually-hidden` mixin starting at each breakpoint and up,
+// enabling screen-reader-only content that is conditionally hidden
+// based on viewport size.
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+  @include media-breakpoint-up($breakpoint) {
+    .visually#{$infix}-hidden {
+      @include visually-hidden();
+    }
+  }
+}