diff --git a/src/scss/utility-mixins/display.scss b/src/scss/utility-mixins/display.scss
index fca4e94661f461af9bc69c136b0927320303f07c..bf6ce7cb4b270d32aae9dc81a8d4b7f19e933061 100644
--- a/src/scss/utility-mixins/display.scss
+++ b/src/scss/utility-mixins/display.scss
@@ -11,6 +11,12 @@
   display: flex;
 }
 
+@mixin gl-display-sm-flex {
+  @media (min-width: $breakpoint-sm) {
+    @include gl-display-flex;
+  }
+}
+
 @mixin gl-display-inline-flex {
   display: inline-flex;
 }
@@ -38,3 +44,9 @@
 @mixin gl-display-table-cell {
   display: table-cell;
 }
+
+@mixin gl-display-sm-block {
+  @media (min-width: $breakpoint-sm) {
+    @include gl-display-block;
+  }
+}
diff --git a/src/scss/utility-mixins/flex.scss b/src/scss/utility-mixins/flex.scss
index ec7702a206162c0dcbbf7f821a580899f5260e90..455d699f465339a084151731b0f371c6f12d152e 100644
--- a/src/scss/utility-mixins/flex.scss
+++ b/src/scss/utility-mixins/flex.scss
@@ -13,6 +13,12 @@
   flex-wrap: wrap;
 }
 
+@mixin gl-flex-sm-wrap {
+  @media (min-width: $breakpoint-sm) {
+    @include gl-flex-wrap;
+  }
+}
+
 @mixin gl-flex-direction-column {
   flex-direction: column;
 }
diff --git a/src/scss/utility-mixins/vertical-align.scss b/src/scss/utility-mixins/vertical-align.scss
index aa201eb107f2ca5c2ae3b24871436d42bfff0e93..c923756e0e257d5635a6b690cb37b955bee0ab71 100644
--- a/src/scss/utility-mixins/vertical-align.scss
+++ b/src/scss/utility-mixins/vertical-align.scss
@@ -16,3 +16,7 @@
 @mixin gl-vertical-align-bottom {
   vertical-align: bottom;
 }
+
+@mixin gl-vertical-align-text-bottom {
+  vertical-align: text-bottom;
+}