diff --git a/.changeset/serious-sloths-hide.md b/.changeset/serious-sloths-hide.md
new file mode 100644
index 00000000000..23e2541a8e1
--- /dev/null
+++ b/.changeset/serious-sloths-hide.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Readjust order of `PageLayout.Pane` contents
diff --git a/src/PageLayout/PageLayout.features.stories.tsx b/src/PageLayout/PageLayout.features.stories.tsx
index 25c704eb2d8..66a4989bd8f 100644
--- a/src/PageLayout/PageLayout.features.stories.tsx
+++ b/src/PageLayout/PageLayout.features.stories.tsx
@@ -124,6 +124,9 @@ export const StickyPane: Story = args => (
             </Box>
           )
         })}
+        <Box as="p">
+          Donec sit amet massa purus. <a href="#foo">Plura de lorem Ispum.</a>
+        </Box>
       </Box>
     </PageLayout.Pane>
     <PageLayout.Footer padding="normal" divider="line">
diff --git a/src/PageLayout/PageLayout.tsx b/src/PageLayout/PageLayout.tsx
index a2321b06b40..378d8fe8c3d 100644
--- a/src/PageLayout/PageLayout.tsx
+++ b/src/PageLayout/PageLayout.tsx
@@ -758,8 +758,8 @@ const Pane = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageLayout
                     }
                   : {}),
                 ...(position === 'end'
-                  ? {flexDirection: 'row', marginLeft: SPACING_MAP[columnGap]}
-                  : {flexDirection: 'row-reverse', marginRight: SPACING_MAP[columnGap]}),
+                  ? {flexDirection: 'row-reverse', marginLeft: SPACING_MAP[columnGap]}
+                  : {flexDirection: 'row', marginRight: SPACING_MAP[columnGap]}),
               },
             },
             sx,
@@ -771,35 +771,6 @@ const Pane = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageLayout
           variant={{narrow: dividerVariant, regular: 'none'}}
           sx={{[position === 'end' ? 'marginBottom' : 'marginTop']: SPACING_MAP[rowGap]}}
         />
-        <VerticalDivider
-          variant={{
-            narrow: 'none',
-            // If pane is resizable, always show a vertical divider on regular viewports
-            regular: resizable ? 'line' : dividerVariant,
-          }}
-          // If pane is resizable, the divider should be draggable
-          draggable={resizable}
-          sx={{[position === 'end' ? 'marginRight' : 'marginLeft']: SPACING_MAP[columnGap]}}
-          onDrag={(delta, isKeyboard = false) => {
-            // Get the number of pixels the divider was dragged
-            let deltaWithDirection
-            if (isKeyboard) {
-              deltaWithDirection = delta
-            } else {
-              deltaWithDirection = position === 'end' ? -delta : delta
-            }
-            updatePaneWidth(paneWidth + deltaWithDirection)
-          }}
-          // Ensure `paneWidth` state and actual pane width are in sync when the drag ends
-          onDragEnd={() => {
-            const paneRect = paneRef.current?.getBoundingClientRect()
-            if (!paneRect) return
-            updatePaneWidth(paneRect.width)
-          }}
-          // Reset pane width on double click
-          onDoubleClick={() => updatePaneWidth(getDefaultPaneWidth(width))}
-        />
-
         <Box
           ref={paneRef}
           style={{
@@ -828,6 +799,35 @@ const Pane = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageLayout
         >
           {children}
         </Box>
+
+        <VerticalDivider
+          variant={{
+            narrow: 'none',
+            // If pane is resizable, always show a vertical divider on regular viewports
+            regular: resizable ? 'line' : dividerVariant,
+          }}
+          // If pane is resizable, the divider should be draggable
+          draggable={resizable}
+          sx={{[position === 'end' ? 'marginRight' : 'marginLeft']: SPACING_MAP[columnGap]}}
+          onDrag={(delta, isKeyboard = false) => {
+            // Get the number of pixels the divider was dragged
+            let deltaWithDirection
+            if (isKeyboard) {
+              deltaWithDirection = delta
+            } else {
+              deltaWithDirection = position === 'end' ? -delta : delta
+            }
+            updatePaneWidth(paneWidth + deltaWithDirection)
+          }}
+          // Ensure `paneWidth` state and actual pane width are in sync when the drag ends
+          onDragEnd={() => {
+            const paneRect = paneRef.current?.getBoundingClientRect()
+            if (!paneRect) return
+            updatePaneWidth(paneRect.width)
+          }}
+          // Reset pane width on double click
+          onDoubleClick={() => updatePaneWidth(getDefaultPaneWidth(width))}
+        />
       </Box>
     )
   },
diff --git a/src/PageLayout/__snapshots__/PageLayout.test.tsx.snap b/src/PageLayout/__snapshots__/PageLayout.test.tsx.snap
index ad552cc80d3..bb23bd6bec0 100644
--- a/src/PageLayout/__snapshots__/PageLayout.test.tsx.snap
+++ b/src/PageLayout/__snapshots__/PageLayout.test.tsx.snap
@@ -109,13 +109,6 @@ exports[`PageLayout renders condensed layout 1`] = `
 }
 
 .c10 {
-  height: 100%;
-  position: relative;
-  display: none;
-  margin-right: 16px;
-}
-
-.c11 {
   --pane-min-width: 256px;
   --pane-max-width-diff: 511px;
   --pane-max-width: calc(100vw - var(--pane-max-width-diff));
@@ -123,6 +116,13 @@ exports[`PageLayout renders condensed layout 1`] = `
   padding: 0;
 }
 
+.c11 {
+  height: 100%;
+  position: relative;
+  display: none;
+  margin-right: 16px;
+}
+
 .c12 {
   -webkit-order: 4;
   -ms-flex-order: 4;
@@ -143,9 +143,9 @@ exports[`PageLayout renders condensed layout 1`] = `
     width: auto;
     margin-top: 0 !important;
     margin-bottom: 0 !important;
-    -webkit-flex-direction: row;
-    -ms-flex-direction: row;
-    flex-direction: row;
+    -webkit-flex-direction: row-reverse;
+    -ms-flex-direction: row-reverse;
+    flex-direction: row-reverse;
     margin-left: 16px;
   }
 }
@@ -162,20 +162,20 @@ exports[`PageLayout renders condensed layout 1`] = `
 }
 
 @media screen and (min-width:768px) {
-  .c11 {
+  .c10 {
     width: 256px;
     overflow: auto;
   }
 }
 
 @media screen and (min-width:1012px) {
-  .c11 {
+  .c10 {
     width: 296px;
   }
 }
 
 @media screen and (min-width:1280px) {
-  .c11 {
+  .c10 {
     --pane-max-width-diff: 959px;
   }
 }
@@ -226,13 +226,13 @@ exports[`PageLayout renders condensed layout 1`] = `
           />
           <div
             class="c10"
-          />
-          <div
-            class="c11"
             style="--pane-width: 296px;"
           >
             Pane
           </div>
+          <div
+            class="c11"
+          />
         </div>
       </div>
       <footer
@@ -361,13 +361,6 @@ exports[`PageLayout renders default layout 1`] = `
 }
 
 .c10 {
-  height: 100%;
-  position: relative;
-  display: none;
-  margin-right: 16px;
-}
-
-.c11 {
   --pane-min-width: 256px;
   --pane-max-width-diff: 511px;
   --pane-max-width: calc(100vw - var(--pane-max-width-diff));
@@ -375,6 +368,13 @@ exports[`PageLayout renders default layout 1`] = `
   padding: 0;
 }
 
+.c11 {
+  height: 100%;
+  position: relative;
+  display: none;
+  margin-right: 16px;
+}
+
 .c12 {
   -webkit-order: 4;
   -ms-flex-order: 4;
@@ -439,9 +439,9 @@ exports[`PageLayout renders default layout 1`] = `
     width: auto;
     margin-top: 0 !important;
     margin-bottom: 0 !important;
-    -webkit-flex-direction: row;
-    -ms-flex-direction: row;
-    flex-direction: row;
+    -webkit-flex-direction: row-reverse;
+    -ms-flex-direction: row-reverse;
+    flex-direction: row-reverse;
     margin-left: 16px;
   }
 }
@@ -476,12 +476,21 @@ exports[`PageLayout renders default layout 1`] = `
 }
 
 @media screen and (min-width:768px) {
-
+  .c10 {
+    width: 256px;
+    overflow: auto;
+  }
 }
 
 @media screen and (min-width:1012px) {
   .c10 {
-    margin-right: 24px;
+    width: 296px;
+  }
+}
+
+@media screen and (min-width:1280px) {
+  .c10 {
+    --pane-max-width-diff: 959px;
   }
 }
 
@@ -490,21 +499,12 @@ exports[`PageLayout renders default layout 1`] = `
 }
 
 @media screen and (min-width:768px) {
-  .c11 {
-    width: 256px;
-    overflow: auto;
-  }
-}
 
-@media screen and (min-width:1012px) {
-  .c11 {
-    width: 296px;
-  }
 }
 
-@media screen and (min-width:1280px) {
+@media screen and (min-width:1012px) {
   .c11 {
-    --pane-max-width-diff: 959px;
+    margin-right: 24px;
   }
 }
 
@@ -568,13 +568,13 @@ exports[`PageLayout renders default layout 1`] = `
           />
           <div
             class="c10"
-          />
-          <div
-            class="c11"
             style="--pane-width: 296px;"
           >
             Pane
           </div>
+          <div
+            class="c11"
+          />
         </div>
       </div>
       <footer
@@ -703,13 +703,6 @@ exports[`PageLayout renders pane in different position when narrow 1`] = `
 }
 
 .c10 {
-  height: 100%;
-  position: relative;
-  display: none;
-  margin-right: 16px;
-}
-
-.c11 {
   --pane-min-width: 256px;
   --pane-max-width-diff: 511px;
   --pane-max-width: calc(100vw - var(--pane-max-width-diff));
@@ -717,6 +710,13 @@ exports[`PageLayout renders pane in different position when narrow 1`] = `
   padding: 0;
 }
 
+.c11 {
+  height: 100%;
+  position: relative;
+  display: none;
+  margin-right: 16px;
+}
+
 .c12 {
   -webkit-order: 4;
   -ms-flex-order: 4;
@@ -781,9 +781,9 @@ exports[`PageLayout renders pane in different position when narrow 1`] = `
     width: auto;
     margin-top: 0 !important;
     margin-bottom: 0 !important;
-    -webkit-flex-direction: row;
-    -ms-flex-direction: row;
-    flex-direction: row;
+    -webkit-flex-direction: row-reverse;
+    -ms-flex-direction: row-reverse;
+    flex-direction: row-reverse;
     margin-left: 16px;
   }
 }
@@ -818,12 +818,21 @@ exports[`PageLayout renders pane in different position when narrow 1`] = `
 }
 
 @media screen and (min-width:768px) {
-
+  .c10 {
+    width: 256px;
+    overflow: auto;
+  }
 }
 
 @media screen and (min-width:1012px) {
   .c10 {
-    margin-right: 24px;
+    width: 296px;
+  }
+}
+
+@media screen and (min-width:1280px) {
+  .c10 {
+    --pane-max-width-diff: 959px;
   }
 }
 
@@ -832,21 +841,12 @@ exports[`PageLayout renders pane in different position when narrow 1`] = `
 }
 
 @media screen and (min-width:768px) {
-  .c11 {
-    width: 256px;
-    overflow: auto;
-  }
-}
 
-@media screen and (min-width:1012px) {
-  .c11 {
-    width: 296px;
-  }
 }
 
-@media screen and (min-width:1280px) {
+@media screen and (min-width:1012px) {
   .c11 {
-    --pane-max-width-diff: 959px;
+    margin-right: 24px;
   }
 }
 
@@ -910,13 +910,13 @@ exports[`PageLayout renders pane in different position when narrow 1`] = `
           />
           <div
             class="c10"
-          />
-          <div
-            class="c11"
             style="--pane-width: 296px;"
           >
             Pane
           </div>
+          <div
+            class="c11"
+          />
         </div>
       </div>
       <footer
@@ -1038,13 +1038,6 @@ exports[`PageLayout renders with dividers 1`] = `
 }
 
 .c9 {
-  height: 100%;
-  position: relative;
-  display: none;
-  margin-left: 16px;
-}
-
-.c10 {
   --pane-min-width: 256px;
   --pane-max-width-diff: 511px;
   --pane-max-width: calc(100vw - var(--pane-max-width-diff));
@@ -1052,6 +1045,13 @@ exports[`PageLayout renders with dividers 1`] = `
   padding: 0;
 }
 
+.c10 {
+  height: 100%;
+  position: relative;
+  display: none;
+  margin-left: 16px;
+}
+
 .c11 {
   -webkit-order: 4;
   -ms-flex-order: 4;
@@ -1123,9 +1123,9 @@ exports[`PageLayout renders with dividers 1`] = `
     width: auto;
     margin-top: 0 !important;
     margin-bottom: 0 !important;
-    -webkit-flex-direction: row-reverse;
-    -ms-flex-direction: row-reverse;
-    flex-direction: row-reverse;
+    -webkit-flex-direction: row;
+    -ms-flex-direction: row;
+    flex-direction: row;
     margin-right: 16px;
   }
 }
@@ -1141,12 +1141,21 @@ exports[`PageLayout renders with dividers 1`] = `
 }
 
 @media screen and (min-width:768px) {
-
+  .c9 {
+    width: 256px;
+    overflow: auto;
+  }
 }
 
 @media screen and (min-width:1012px) {
   .c9 {
-    margin-left: 24px;
+    width: 296px;
+  }
+}
+
+@media screen and (min-width:1280px) {
+  .c9 {
+    --pane-max-width-diff: 959px;
   }
 }
 
@@ -1155,21 +1164,12 @@ exports[`PageLayout renders with dividers 1`] = `
 }
 
 @media screen and (min-width:768px) {
-  .c10 {
-    width: 256px;
-    overflow: auto;
-  }
-}
 
-@media screen and (min-width:1012px) {
-  .c10 {
-    width: 296px;
-  }
 }
 
-@media screen and (min-width:1280px) {
+@media screen and (min-width:1012px) {
   .c10 {
-    --pane-max-width-diff: 959px;
+    margin-left: 24px;
   }
 }
 
@@ -1252,13 +1252,13 @@ exports[`PageLayout renders with dividers 1`] = `
           />
           <div
             class="c9"
-          />
-          <div
-            class="c10"
             style="--pane-width: 296px;"
           >
             Pane
           </div>
+          <div
+            class="c10"
+          />
         </div>
       </div>
       <footer
diff --git a/src/SplitPageLayout/__snapshots__/SplitPageLayout.test.tsx.snap b/src/SplitPageLayout/__snapshots__/SplitPageLayout.test.tsx.snap
index e3181682754..2e8635f42ae 100644
--- a/src/SplitPageLayout/__snapshots__/SplitPageLayout.test.tsx.snap
+++ b/src/SplitPageLayout/__snapshots__/SplitPageLayout.test.tsx.snap
@@ -111,13 +111,6 @@ exports[`SplitPageLayout renders default layout 1`] = `
 }
 
 .c10 {
-  height: 100%;
-  position: relative;
-  display: none;
-  margin-left: 0;
-}
-
-.c11 {
   --pane-min-width: 256px;
   --pane-max-width-diff: 511px;
   --pane-max-width: calc(100vw - var(--pane-max-width-diff));
@@ -125,6 +118,13 @@ exports[`SplitPageLayout renders default layout 1`] = `
   padding: 16px;
 }
 
+.c11 {
+  height: 100%;
+  position: relative;
+  display: none;
+  margin-left: 0;
+}
+
 .c12 {
   -webkit-order: 4;
   -ms-flex-order: 4;
@@ -186,9 +186,9 @@ exports[`SplitPageLayout renders default layout 1`] = `
     position: sticky;
     top: 0px;
     max-height: var(--sticky-pane-height);
-    -webkit-flex-direction: row-reverse;
-    -ms-flex-direction: row-reverse;
-    flex-direction: row-reverse;
+    -webkit-flex-direction: row;
+    -ms-flex-direction: row;
+    flex-direction: row;
     margin-right: 0;
   }
 }
@@ -205,21 +205,21 @@ exports[`SplitPageLayout renders default layout 1`] = `
 }
 
 @media screen and (min-width:768px) {
-  .c11 {
+  .c10 {
     width: 256px;
     overflow: auto;
   }
 }
 
 @media screen and (min-width:1012px) {
-  .c11 {
+  .c10 {
     width: 296px;
     padding: 24px;
   }
 }
 
 @media screen and (min-width:1280px) {
-  .c11 {
+  .c10 {
     --pane-max-width-diff: 959px;
   }
 }
@@ -277,13 +277,13 @@ exports[`SplitPageLayout renders default layout 1`] = `
           />
           <div
             class="c10"
-          />
-          <div
-            class="c11"
             style="--pane-width: 296px;"
           >
             Pane
           </div>
+          <div
+            class="c11"
+          />
         </div>
       </div>
       <footer