diff --git a/_includes/header.html b/_includes/header.html
index 7bdb3a1..25a47f7 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -14,7 +14,7 @@
         </a>
 
         <!-- Mobile menu button -->
-        <button class="nav__menu-trigger hidden-md" type="button" aria-label="Navigation Menu" aria-expanded="false">
+        <button class="nav__menu-trigger hidden-md-up" type="button" aria-label="Navigation Menu" aria-expanded="false">
             <span class="visually-hidden">Menu</span>
             <span class="hamburger">
                 <span class="hamburger__inner"></span>
@@ -35,7 +35,7 @@
             {% endfor %}
 
             <!-- Social icons (mobile only) -->
-            <li class="nav-social-list hidden-md">
+            <li class="nav-social-list hidden-md-up">
                 <a class="nav-social-list__item text-white no-underline" href="https://www.twitter.com/{{ site.twitter_username| cgi_escape | escape }}">
                     <svg class="svg-icon"><use xlink:href="{{ '/assets/images/icons/icon-sprite.svg#twitter' | relative_url }}"></use></svg>
                     <span class="visually-hidden">Scribd on Twitter</span>
@@ -55,7 +55,7 @@
             </li>
 
             <!-- Github links (mobile only) -->
-            <li class="hidden-md monospace fs-md">
+            <li class="hidden-md-up monospace fs-md">
                 <a class="nav-github-link text-white" href="{{site.github.repository_url}}/edit/{{ site.branch }}/{{page.path}}">Improve this Page</a><a class="nav-github-link text-white" href="{{site.github.repository_url}}/commits/{{ site.branch }}/{{page.path}}">Page History</a>
             </li>
         </ul>
diff --git a/assets/_sass/component/_footer.scss b/assets/_sass/component/_footer.scss
index b9c1395..d2cf405 100644
--- a/assets/_sass/component/_footer.scss
+++ b/assets/_sass/component/_footer.scss
@@ -35,7 +35,7 @@ main { flex: 1; }
 }
 
 .footer .logo {
-    @media(max-width: $bp-md) {
+    @media (max-width: $bp-md - 1px) {
         margin-bottom: rem-calc(10px);
         max-width: rem-calc(110px);
     }
diff --git a/assets/_sass/component/_navigation.scss b/assets/_sass/component/_navigation.scss
index eb1db2d..94af531 100644
--- a/assets/_sass/component/_navigation.scss
+++ b/assets/_sass/component/_navigation.scss
@@ -32,7 +32,7 @@ $nav-zindex: 10;
 }
 
 .nav .logo {
-    @media(max-width: $bp-md) {
+    @media(max-width: $bp-md - 1px) {
         max-width: rem-calc(105px);
     }
 }
@@ -54,7 +54,7 @@ $nav-zindex: 10;
 }
 
 .nav-list {
-    @media (max-width: $bp-md) {
+    @media (max-width: $bp-md - 1px) {
     position: fixed;
     top: 0;
     right: 0;
diff --git a/assets/_sass/utilities/_visibility.scss b/assets/_sass/utilities/_visibility.scss
index 7d72db1..d76b6f8 100644
--- a/assets/_sass/utilities/_visibility.scss
+++ b/assets/_sass/utilities/_visibility.scss
@@ -7,24 +7,50 @@
     display: none !important;
 }
 
-.hidden-sm {
+// Hide at breakpoint size upward
+.hidden-sm-up {
     @media (min-width: $bp-sm) {
         display: none !important;
     }
 }
 
-.hidden-md {
+.hidden-md-up {
     @media (min-width: $bp-md) {
         display: none !important;
     }
 }
 
-.hidden-lg {
+.hidden-lg-up {
     @media (min-width: $bp-lg) {
         display: none !important;
     }
 }
 
+// Hide at breakpoint size downward
+.hidden-sm-down {
+    display: none !important;
+
+    @media (min-width: $bp-md) {
+        display: inherit !important;
+    }
+}
+
+.hidden-md-down {
+    display: none !important;
+
+    @media (min-width: $bp-lg) {
+        display: inherit !important;
+    }
+}
+
+.hidden-lg-down {
+    display: none !important;
+
+    @media (min-width: $bp-xl) {
+        display: inherit !important;
+    }
+}
+
 // Hide only visually, but have it available for screen readers:
 // https://a11yproject.com/posts/how-to-hide-content/
 .visually-hidden:not(:focus):not(:active) {