diff --git a/nextjs-app/components/SchoolDetailView.module.css b/nextjs-app/components/SchoolDetailView.module.css
index 4413aae..89b71dc 100644
--- a/nextjs-app/components/SchoolDetailView.module.css
+++ b/nextjs-app/components/SchoolDetailView.module.css
@@ -390,24 +390,6 @@
     color: var(--accent-teal, #2d7d7d);
 }
 
-/* Swap which controls show at the mobile breakpoint. */
-@media (max-width: 640px) {
-    .sectionNavLinks,
-    .sectionNavCompare,
-    .sectionNavAll,
-    .sectionNavBackLabel {
-        display: none;
-    }
-
-    .sectionNavMenu {
-        display: flex;
-    }
-
-    .sectionNavCompareIcon {
-        display: inline-flex;
-    }
-}
-
 /* Compare CTA carried into the bar once the hero's button scrolls away. */
 .sectionNavCompare {
     flex: none;
@@ -554,6 +536,25 @@
     }
 }
 
+/* Swap which controls show at the mobile breakpoint. Declared last so these
+   display rules win over the base (equal-specificity) declarations above. */
+@media (max-width: 640px) {
+    .sectionNavLinks,
+    .sectionNavCompare,
+    .sectionNavAll,
+    .sectionNavBackLabel {
+        display: none;
+    }
+
+    .sectionNavMenu {
+        display: flex;
+    }
+
+    .sectionNavCompareIcon {
+        display: inline-flex;
+    }
+}
+
 /* Unified card for all content sections */
 .card {
     background: var(--bg-card, white);