diff --git a/src/collections/programs/Programs.style.js b/src/collections/programs/Programs.style.js
index a364c363ac528b..fc1098c2546358 100644
--- a/src/collections/programs/Programs.style.js
+++ b/src/collections/programs/Programs.style.js
@@ -32,6 +32,24 @@ export const ProgramsWrapper = styled.div`
     flex-grow: 0.25;
   }
 
+  .lfx-layout {
+    display: flex;
+    gap: 2rem;
+    align-items: flex-start;
+    @media only screen and (max-width: 900px) {
+      flex-direction: column-reverse;
+    }
+  }
+
+  .lfx-sidebar-col {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    align-items: flex-end;
+    flex-shrink: 0;
+    align-self: stretch;
+  }
+
   .iframe-container {
     position: relative;
     float: right;
diff --git a/src/collections/programs/lfx-2026/lfx-2026.mdx b/src/collections/programs/lfx-2026/lfx-2026.mdx
index 1bd45e8bcad8bf..698df33b8c6b9e 100644
--- a/src/collections/programs/lfx-2026/lfx-2026.mdx
+++ b/src/collections/programs/lfx-2026/lfx-2026.mdx
@@ -22,10 +22,9 @@ export const LfxLogoImage = () => { const { isDark } = useStyledDarkMode(); retu
 
 <span id="top"></span>
 
-<div style={{display: "flex", gap: "2rem", alignItems: "flex-start"}}>
+<div className="lfx-layout">
 <div style={{flex: "1 1 auto", minWidth: 0}}>
 
-<div style={{overflow: "hidden"}}><LfxLogoImage /></div>
 <h3>Linux Foundation 2026 Program Timeline</h3>
 
 <div>
@@ -400,12 +399,17 @@ We interact daily over Slack, and have an open source project [meeting everyday]
 
 
 </div>
-<LfxPageNav items={[
-  { href: "#spring-2026", label: "Spring 2026 Projects" },
-  { href: "#summer-2026", label: "Summer 2026 Projects" },
-  { href: "#fall-2026", label: "Fall 2026 Projects" },
-  { href: "#additional-info", label: "Additional Information" },
-]} />
+<div className="lfx-sidebar-col">
+  <LfxLogoImage />
+  <div style={{flexGrow: 1}}>
+    <LfxPageNav items={[
+      { href: "#spring-2026", label: "Spring 2026 Projects" },
+      { href: "#summer-2026", label: "Summer 2026 Projects" },
+      { href: "#fall-2026", label: "Fall 2026 Projects" },
+      { href: "#additional-info", label: "Additional Information" },
+    ]} />
+  </div>
+</div>
 </div>
 
 </ProgramsWrapper>