diff --git a/.changeset/modern-wombats-wink.md b/.changeset/modern-wombats-wink.md
new file mode 100644
index 00000000000..ee65f65aa2d
--- /dev/null
+++ b/.changeset/modern-wombats-wink.md
@@ -0,0 +1,7 @@
+---
+'@primer/react': patch
+---
+
+PageLayout: Deprecates position prop for PageLayout.Pane. Please semantically order elements in the dom
+
+<!-- Changed components: PageLayout, SplitPageLayout -->
diff --git a/docs/content/PageLayout.mdx b/docs/content/PageLayout.mdx
index b3a7be5f539..127d72423cb 100644
--- a/docs/content/PageLayout.mdx
+++ b/docs/content/PageLayout.mdx
@@ -87,12 +87,12 @@ See [storybook](https://primer.style/react/storybook?path=/story/components-page
   <PageLayout.Header>
     <Placeholder label="Header" height={64} />
   </PageLayout.Header>
+  <PageLayout.Pane>
+    <Placeholder label="Pane" height={120} />
+  </PageLayout.Pane>
   <PageLayout.Content>
     <Placeholder label="Content" height={240} />
   </PageLayout.Content>
-  <PageLayout.Pane position="start">
-    <Placeholder label="Pane" height={120} />
-  </PageLayout.Pane>
   <PageLayout.Footer>
     <Placeholder label="Footer" height={64} />
   </PageLayout.Footer>
@@ -106,12 +106,12 @@ See [storybook](https://primer.style/react/storybook?path=/story/components-page
   <PageLayout.Header>
     <Placeholder label="Header" height={64} />
   </PageLayout.Header>
+  <PageLayout.Pane hidden={{narrow: true}}>
+    <Placeholder label="Pane" height={120} />
+  </PageLayout.Pane>
   <PageLayout.Content>
     <Placeholder label="Content" height={240} />
   </PageLayout.Content>
-  <PageLayout.Pane position="start" hidden={{narrow: true}}>
-    <Placeholder label="Pane" height={120} />
-  </PageLayout.Pane>
   <PageLayout.Footer>
     <Placeholder label="Footer" height={64} />
   </PageLayout.Footer>
@@ -193,12 +193,12 @@ Add `offsetHeader` prop to specify the height of the custom sticky header along
     Custom sticky header
   </Box>
   <PageLayout>
+    <PageLayout.Pane sticky offsetHeader={64}>
+      <Placeholder label="Pane" height={120} />
+    </PageLayout.Pane>
     <PageLayout.Content>
       <Placeholder label="Content" height={320} />
     </PageLayout.Content>
-    <PageLayout.Pane position="start" sticky offsetHeader={64}>
-      <Placeholder label="Pane" height={120} />
-    </PageLayout.Pane>
     <PageLayout.Footer>
       <Placeholder label="Footer" height={64} />
     </PageLayout.Footer>
@@ -221,7 +221,7 @@ navigation container is used for.
   <PageLayout.Header>
     <Placeholder label="Header" height={64} />
   </PageLayout.Header>
-  <PageLayout.Pane position="start" aria-label="Secondary navigation">
+  <PageLayout.Pane aria-label="Secondary navigation">
     <NavList>
       <NavList.Item href="/" aria-current="page">
         Home
diff --git a/docs/content/SplitPageLayout.mdx b/docs/content/SplitPageLayout.mdx
index b6f82f4f7fc..3dc7bb4f343 100644
--- a/docs/content/SplitPageLayout.mdx
+++ b/docs/content/SplitPageLayout.mdx
@@ -167,7 +167,7 @@ If you need a more flexible layout component, consider using the [PageLayout](/P
     <SplitPageLayout.Content>
       <Placeholder label="Content" height={420} />
     </SplitPageLayout.Content>
-    <SplitPageLayout.Pane position="end">
+    <SplitPageLayout.Pane>
       <Placeholder label="Pane" height={120} />
     </SplitPageLayout.Pane>
     <SplitPageLayout.Footer>
diff --git a/src/PageLayout/PageLayout.docs.json b/src/PageLayout/PageLayout.docs.json
index 14cf798687e..ec6741a398b 100644
--- a/src/PageLayout/PageLayout.docs.json
+++ b/src/PageLayout/PageLayout.docs.json
@@ -137,7 +137,8 @@
           "name": "position",
           "type": "| 'start' | 'end' | { narrow?: | 'start' | 'end' regular?: | 'start' | 'end' wide?: | 'start' | 'end' }",
           "defaultValue": "'end'",
-          "description": ""
+          "description": "Use source order instead of relying on the `position` prop",
+          "deprecated": true
         },
         {
           "name": "positionWhenNarrow",
diff --git a/src/PageLayout/PageLayout.features.stories.tsx b/src/PageLayout/PageLayout.features.stories.tsx
index 9f2ceebed5f..70bc71152bb 100644
--- a/src/PageLayout/PageLayout.features.stories.tsx
+++ b/src/PageLayout/PageLayout.features.stories.tsx
@@ -83,49 +83,42 @@ export const StickyPane: Story = args => (
     <PageLayout.Header padding="normal" divider="line">
       <Placeholder label="Header" height={64} />
     </PageLayout.Header>
-    <PageLayout.Content padding="normal" width="large">
+    <PageLayout.Pane resizable padding="normal" divider="line" sticky={args.sticky} aria-label="Side pane">
       <Box sx={{display: 'grid', gap: 3}}>
-        {Array.from({length: args.numParagraphsInContent}).map((_, i) => {
-          const testId = `content${i}`
+        {Array.from({length: args.numParagraphsInPane}).map((_, i) => {
+          const testId = `paragraph${i}`
           return (
             <Box key={i} as="p" sx={{margin: 0}}>
               <span data-testid={testId}>
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at enim id lorem tempus egestas a non
                 ipsum. Maecenas imperdiet ante quam, at varius lorem molestie vel. Sed at eros consequat, varius tellus
                 et, auctor felis. Donec pulvinar lacinia urna nec commodo. Phasellus at imperdiet risus. Donec sit amet
-                massa purus. Nunc sem lectus, bibendum a sapien nec, tristique tempus felis. Ut porttitor auctor tellus
-                in imperdiet. Ut blandit tincidunt augue, quis fringilla nunc tincidunt sed. Vestibulum auctor euismod
-                nisi. Nullam tincidunt est in mi tincidunt dictum. Sed consectetur aliquet velit ut ornare.
+                massa purus.
               </span>
             </Box>
           )
         })}
       </Box>
-    </PageLayout.Content>
-    <PageLayout.Pane
-      position="start"
-      resizable
-      padding="normal"
-      divider="line"
-      sticky={args.sticky}
-      aria-label="Side pane"
-    >
+    </PageLayout.Pane>
+    <PageLayout.Content padding="normal" width="large">
       <Box sx={{display: 'grid', gap: 3}}>
-        {Array.from({length: args.numParagraphsInPane}).map((_, i) => {
-          const testId = `paragraph${i}`
+        {Array.from({length: args.numParagraphsInContent}).map((_, i) => {
+          const testId = `content${i}`
           return (
             <Box key={i} as="p" sx={{margin: 0}}>
               <span data-testid={testId}>
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at enim id lorem tempus egestas a non
                 ipsum. Maecenas imperdiet ante quam, at varius lorem molestie vel. Sed at eros consequat, varius tellus
                 et, auctor felis. Donec pulvinar lacinia urna nec commodo. Phasellus at imperdiet risus. Donec sit amet
-                massa purus.
+                massa purus. Nunc sem lectus, bibendum a sapien nec, tristique tempus felis. Ut porttitor auctor tellus
+                in imperdiet. Ut blandit tincidunt augue, quis fringilla nunc tincidunt sed. Vestibulum auctor euismod
+                nisi. Nullam tincidunt est in mi tincidunt dictum. Sed consectetur aliquet velit ut ornare.
               </span>
             </Box>
           )
         })}
       </Box>
-    </PageLayout.Pane>
+    </PageLayout.Content>
     <PageLayout.Footer padding="normal" divider="line">
       <Placeholder label="Footer" height={64} />
     </PageLayout.Footer>
@@ -158,32 +151,32 @@ export const NestedScrollContainer: Story = args => (
         <PageLayout.Header padding="normal" divider="line">
           <Placeholder label="Header" height={64} />
         </PageLayout.Header>
-        <PageLayout.Content padding="normal" width="large">
+        <PageLayout.Pane padding="normal" divider="line" sticky aria-label="Side pane">
           <Box sx={{display: 'grid', gap: 3}}>
-            {Array.from({length: args.numParagraphsInContent}).map((_, i) => (
+            {Array.from({length: args.numParagraphsInPane}).map((_, i) => (
               <Box key={i} as="p" sx={{margin: 0}}>
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at enim id lorem tempus egestas a non
                 ipsum. Maecenas imperdiet ante quam, at varius lorem molestie vel. Sed at eros consequat, varius tellus
                 et, auctor felis. Donec pulvinar lacinia urna nec commodo. Phasellus at imperdiet risus. Donec sit amet
-                massa purus. Nunc sem lectus, bibendum a sapien nec, tristique tempus felis. Ut porttitor auctor tellus
-                in imperdiet. Ut blandit tincidunt augue, quis fringilla nunc tincidunt sed. Vestibulum auctor euismod
-                nisi. Nullam tincidunt est in mi tincidunt dictum. Sed consectetur aliquet velit ut ornare.
+                massa purus.
               </Box>
             ))}
           </Box>
-        </PageLayout.Content>
-        <PageLayout.Pane position="start" padding="normal" divider="line" sticky aria-label="Side pane">
+        </PageLayout.Pane>
+        <PageLayout.Content padding="normal" width="large">
           <Box sx={{display: 'grid', gap: 3}}>
-            {Array.from({length: args.numParagraphsInPane}).map((_, i) => (
+            {Array.from({length: args.numParagraphsInContent}).map((_, i) => (
               <Box key={i} as="p" sx={{margin: 0}}>
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at enim id lorem tempus egestas a non
                 ipsum. Maecenas imperdiet ante quam, at varius lorem molestie vel. Sed at eros consequat, varius tellus
                 et, auctor felis. Donec pulvinar lacinia urna nec commodo. Phasellus at imperdiet risus. Donec sit amet
-                massa purus.
+                massa purus. Nunc sem lectus, bibendum a sapien nec, tristique tempus felis. Ut porttitor auctor tellus
+                in imperdiet. Ut blandit tincidunt augue, quis fringilla nunc tincidunt sed. Vestibulum auctor euismod
+                nisi. Nullam tincidunt est in mi tincidunt dictum. Sed consectetur aliquet velit ut ornare.
               </Box>
             ))}
           </Box>
-        </PageLayout.Pane>
+        </PageLayout.Content>
         <PageLayout.Footer padding="normal" divider="line">
           <Placeholder label="Footer" height={64} />
         </PageLayout.Footer>
@@ -228,6 +221,23 @@ export const CustomStickyHeader: Story = args => (
       Custom sticky header
     </Box>
     <PageLayout rowGap="none" columnGap="none" padding="none" containerWidth="full">
+      <PageLayout.Pane padding="normal" divider="line" aria-label="Aside pane" sticky offsetHeader={args.offsetHeader}>
+        <Box sx={{display: 'grid', gap: 3}}>
+          {Array.from({length: args.numParagraphsInPane}).map((_, i) => {
+            const testId = `paragraph${i}`
+            return (
+              <Box key={i} as="p" sx={{margin: 0}}>
+                <span data-testid={testId}>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at enim id lorem tempus egestas a non
+                  ipsum. Maecenas imperdiet ante quam, at varius lorem molestie vel. Sed at eros consequat, varius
+                  tellus et, auctor felis. Donec pulvinar lacinia urna nec commodo. Phasellus at imperdiet risus. Donec
+                  sit amet massa purus.
+                </span>
+              </Box>
+            )
+          })}
+        </Box>
+      </PageLayout.Pane>
       <PageLayout.Content padding="normal" width="large">
         <Box sx={{display: 'grid', gap: 3}} data-testid="scrollContainer">
           {Array.from({length: args.numParagraphsInContent}).map((_, i) => {
@@ -248,30 +258,6 @@ export const CustomStickyHeader: Story = args => (
           })}
         </Box>
       </PageLayout.Content>
-      <PageLayout.Pane
-        position="start"
-        padding="normal"
-        divider="line"
-        aria-label="Aside pane"
-        sticky
-        offsetHeader={args.offsetHeader}
-      >
-        <Box sx={{display: 'grid', gap: 3}}>
-          {Array.from({length: args.numParagraphsInPane}).map((_, i) => {
-            const testId = `paragraph${i}`
-            return (
-              <Box key={i} as="p" sx={{margin: 0}}>
-                <span data-testid={testId}>
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at enim id lorem tempus egestas a non
-                  ipsum. Maecenas imperdiet ante quam, at varius lorem molestie vel. Sed at eros consequat, varius
-                  tellus et, auctor felis. Donec pulvinar lacinia urna nec commodo. Phasellus at imperdiet risus. Donec
-                  sit amet massa purus.
-                </span>
-              </Box>
-            )
-          })}
-        </Box>
-      </PageLayout.Pane>
       <PageLayout.Footer padding="normal" divider="line">
         <Placeholder label="Footer" height={64} />
       </PageLayout.Footer>
@@ -306,7 +292,7 @@ export const ResizablePane: Story = () => (
     <PageLayout.Header>
       <Placeholder height={64} label="Header" />
     </PageLayout.Header>
-    <PageLayout.Pane resizable position="start">
+    <PageLayout.Pane resizable>
       <Placeholder height={320} label="Pane" />
     </PageLayout.Pane>
     <PageLayout.Content>
@@ -323,7 +309,7 @@ export const ScrollContainerWithinPageLayoutPane: Story = () => (
     <Box sx={{overflow: 'auto'}}>
       <Placeholder label="Above inner scroll container" height={120} />
       <PageLayout rowGap="none" columnGap="none" padding="none" containerWidth="full">
-        <PageLayout.Pane position="start" padding="normal" divider="line" sticky aria-label="Sticky pane">
+        <PageLayout.Pane padding="normal" divider="line" sticky aria-label="Sticky pane">
           <Box sx={{overflow: 'auto'}}>
             <PageLayout.Pane padding="normal">
               <Placeholder label="Inner scroll container" height={800} />
diff --git a/src/PageLayout/PageLayout.stories.tsx b/src/PageLayout/PageLayout.stories.tsx
index 2ec2aaa0f56..d3cc95afd72 100644
--- a/src/PageLayout/PageLayout.stories.tsx
+++ b/src/PageLayout/PageLayout.stories.tsx
@@ -34,9 +34,6 @@ const meta: Meta = {
     'Content.hidden.regular': false,
     'Content.hidden.narrow': false,
     'Content.hidden.wide': false,
-    'Pane.position.regular': 'end',
-    'Pane.position.narrow': 'end',
-    'Pane.position.wide': 'end',
     'Pane.width': 'medium',
     'Pane.sticky': false,
     'Pane.resizable': false,
@@ -205,31 +202,6 @@ const meta: Meta = {
       table: {category: 'Content props'},
     },
 
-    // Pane prop controls
-    'Pane.position.regular': {
-      type: {
-        name: 'enum',
-        value: ['start', 'end'],
-      },
-      control: {type: 'radio'},
-      table: {category: 'Pane props'},
-    },
-    'Pane.position.narrow': {
-      type: {
-        name: 'enum',
-        value: ['start', 'end'],
-      },
-      control: {type: 'radio'},
-      table: {category: 'Pane props'},
-    },
-    'Pane.position.wide': {
-      type: {
-        name: 'enum',
-        value: ['start', 'end'],
-      },
-      control: {type: 'radio'},
-      table: {category: 'Pane props'},
-    },
     'Pane.width': {
       type: {
         name: 'enum',
@@ -382,11 +354,6 @@ const Template: Story = args => (
     </PageLayout.Content>
     {args['Render pane?'] ? (
       <PageLayout.Pane
-        position={{
-          narrow: args['Pane.position.narrow'],
-          regular: args['Pane.position.regular'],
-          wide: args['Pane.position.wide'],
-        }}
         width={args['Pane.width']}
         minWidth={args['Pane.minWidth']}
         sticky={args['Pane.sticky']}
diff --git a/src/PageLayout/PageLayout.test.tsx b/src/PageLayout/PageLayout.test.tsx
index 03abd241912..8ccabb98ff1 100644
--- a/src/PageLayout/PageLayout.test.tsx
+++ b/src/PageLayout/PageLayout.test.tsx
@@ -53,10 +53,10 @@ describe('PageLayout', () => {
           <PageLayout.Header divider="line" dividerWhenNarrow="filled">
             Header
           </PageLayout.Header>
-          <PageLayout.Content>Content</PageLayout.Content>
-          <PageLayout.Pane position="start" divider="line" dividerWhenNarrow="filled">
+          <PageLayout.Pane divider="line" dividerWhenNarrow="filled">
             Pane
           </PageLayout.Pane>
+          <PageLayout.Content>Content</PageLayout.Content>
           <PageLayout.Footer dividerWhenNarrow="line">Footer</PageLayout.Footer>
         </PageLayout>
       </ThemeProvider>,
diff --git a/src/PageLayout/PageLayout.tsx b/src/PageLayout/PageLayout.tsx
index 71371fc4233..f849b36b88b 100644
--- a/src/PageLayout/PageLayout.tsx
+++ b/src/PageLayout/PageLayout.tsx
@@ -486,6 +486,25 @@ const isPaneWidth = (width: PaneWidth | CustomWidthOptions): width is PaneWidth
 }
 
 export type PageLayoutPaneProps = {
+  /**
+   * @deprecated Use source order instead of relying on the `position` prop
+   *
+   * Before:
+   * ```
+   * <PageLayout>
+   *   <PageLayout.Content />
+   *   <PageLayout.Pane position="start" />
+   * </PageLayout>
+   * ```
+   *
+   * After:
+   * ```
+   * <PageLayout>
+   *   <PageLayout.Pane />
+   *   <PageLayout.Content />
+   * </PageLayout>
+   * ```
+   */
   position?: keyof typeof panePositions | ResponsiveValue<keyof typeof panePositions>
   /**
    * @deprecated Use the `position` prop with a responsive value instead.
diff --git a/src/PageLayout/__snapshots__/PageLayout.test.tsx.snap b/src/PageLayout/__snapshots__/PageLayout.test.tsx.snap
index 97b5bfbea64..accf5442acb 100644
--- a/src/PageLayout/__snapshots__/PageLayout.test.tsx.snap
+++ b/src/PageLayout/__snapshots__/PageLayout.test.tsx.snap
@@ -884,7 +884,7 @@ exports[`PageLayout renders with dividers 1`] = `
   max-width: 100%;
 }
 
-.c6 {
+.c10 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -908,7 +908,7 @@ exports[`PageLayout renders with dividers 1`] = `
   min-width: 1px;
 }
 
-.c7 {
+.c11 {
   width: 100%;
   max-width: 100%;
   margin-left: auto;
@@ -920,14 +920,38 @@ exports[`PageLayout renders with dividers 1`] = `
   padding: 0;
 }
 
-.c12 {
+.c6 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-order: 3;
+  -ms-flex-order: 3;
+  order: 3;
+  width: 100%;
+  margin-left: 0;
+  margin-right: 0;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  margin-top: 16px;
+}
+
+.c7 {
   margin-left: -16px;
   margin-right: -16px;
   display: none;
   margin-bottom: 16px;
 }
 
-.c10 {
+.c8 {
+  height: 100%;
+  position: relative;
+  display: none;
+  margin-right: 16px;
+}
+
+.c9 {
   --pane-min-width: 256px;
   --pane-max-width-diff: 511px;
   --pane-max-width: calc(100vw - var(--pane-max-width-diff));
@@ -935,7 +959,7 @@ exports[`PageLayout renders with dividers 1`] = `
   padding: 0;
 }
 
-.c11 {
+.c12 {
   -webkit-order: 4;
   -ms-flex-order: 4;
   order: 4;
@@ -943,30 +967,6 @@ exports[`PageLayout renders with dividers 1`] = `
   margin-top: 16px;
 }
 
-.c8 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-order: 1;
-  -ms-flex-order: 1;
-  order: 1;
-  width: 100%;
-  margin-left: 0;
-  margin-right: 0;
-  -webkit-flex-direction: column-reverse;
-  -ms-flex-direction: column-reverse;
-  flex-direction: column-reverse;
-  margin-bottom: 16px;
-}
-
-.c9 {
-  height: 100%;
-  position: relative;
-  display: none;
-  margin-left: 16px;
-}
-
 @media screen and (min-width:1012px) {
   .c0 {
     padding: 24px;
@@ -995,69 +995,69 @@ exports[`PageLayout renders with dividers 1`] = `
 }
 
 @media screen and (min-width:768px) {
-  .c12 {
+  .c6 {
+    width: auto;
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+    -webkit-flex-direction: row;
+    -ms-flex-direction: row;
+    flex-direction: row;
+    margin-left: 16px;
+  }
+}
+
+@media screen and (min-width:1012px) {
+  .c6 {
+    margin-top: 24px;
+  }
+}
+
+@media screen and (min-width:768px) {
+  .c7 {
     margin-left: 0 !important;
     margin-right: 0 !important;
   }
 }
 
 @media screen and (min-width:1012px) {
-  .c12 {
+  .c7 {
     margin-left: -24px;
     margin-right: -24px;
     margin-bottom: 24px;
   }
 }
 
+@media screen and (min-width:1012px) {
+  .c8 {
+    margin-right: 24px;
+  }
+}
+
 @media screen and (min-width:768px) {
-  .c10 {
+  .c9 {
     width: 256px;
     overflow: auto;
   }
 }
 
 @media screen and (min-width:1012px) {
-  .c10 {
+  .c9 {
     width: 296px;
   }
 }
 
 @media screen and (min-width:1280px) {
-  .c10 {
+  .c9 {
     --pane-max-width-diff: 959px;
   }
 }
 
 @media screen and (min-width:1012px) {
-  .c11 {
+  .c12 {
     margin-top: 24px;
   }
 }
 
-@media screen and (min-width:768px) {
-  .c8 {
-    width: auto;
-    margin-top: 0 !important;
-    margin-bottom: 0 !important;
-    -webkit-flex-direction: row-reverse;
-    -ms-flex-direction: row-reverse;
-    flex-direction: row-reverse;
-    margin-right: 16px;
-  }
-}
-
-@media screen and (min-width:1012px) {
-  .c8 {
-    margin-bottom: 24px;
-  }
-}
-
-@media screen and (min-width:1012px) {
-  .c9 {
-    margin-left: 24px;
-  }
-}
-
 <div>
   <div
     class="c0"
@@ -1081,43 +1081,43 @@ exports[`PageLayout renders with dividers 1`] = `
       <div
         class="c5"
       >
-        <main
+        <div
           class="c6"
         >
-          <div
-            class=""
-          />
           <div
             class="c7"
-          >
-            Content
-          </div>
-          <div
-            class=""
           />
-        </main>
-        <div
-          class="c8"
-        >
           <div
-            class="c4"
+            class="c8"
           />
           <div
             class="c9"
-          />
-          <div
-            class="c10"
             style="--pane-width: 296px;"
           >
             Pane
           </div>
         </div>
+        <main
+          class="c10"
+        >
+          <div
+            class=""
+          />
+          <div
+            class="c11"
+          >
+            Content
+          </div>
+          <div
+            class=""
+          />
+        </main>
       </div>
       <footer
-        class="c11"
+        class="c12"
       >
         <div
-          class="c12"
+          class="c7"
         />
         <div
           class="c3"
diff --git a/src/SplitPageLayout/SplitPageLayout.docs.json b/src/SplitPageLayout/SplitPageLayout.docs.json
index 9fb036a25d3..fdd133c71f9 100644
--- a/src/SplitPageLayout/SplitPageLayout.docs.json
+++ b/src/SplitPageLayout/SplitPageLayout.docs.json
@@ -71,8 +71,9 @@
         {
           "name": "position",
           "type": "| 'start' | 'end' | { narrow?: | 'start' | 'end' regular?: | 'start' | 'end' wide?: | 'start' | 'end' }",
-          "defaultValue": "'start'",
-          "description": ""
+          "defaultValue": "start'",
+          "description": "Use source order instead of relying on the `position` prop",
+          "deprecated": true
         },
         {
           "name": "width",
diff --git a/src/SplitPageLayout/SplitPageLayout.stories.tsx b/src/SplitPageLayout/SplitPageLayout.stories.tsx
index 39f09809d15..a7c943b9b9f 100644
--- a/src/SplitPageLayout/SplitPageLayout.stories.tsx
+++ b/src/SplitPageLayout/SplitPageLayout.stories.tsx
@@ -148,38 +148,11 @@ export default {
     },
 
     // Pane prop controls
-    'Pane.position.regular': {
-      type: {
-        name: 'enum',
-        value: ['start', 'end'],
-      },
-      defaultValue: 'start',
-      control: {type: 'radio'},
-      table: {category: 'Pane props'},
-    },
     'Pane.id': {
       type: 'string',
       defaultValue: 'customId',
       table: {category: 'Pane props'},
     },
-    'Pane.position.narrow': {
-      type: {
-        name: 'enum',
-        value: ['start', 'end'],
-      },
-      defaultValue: 'start',
-      control: {type: 'radio'},
-      table: {category: 'Pane props'},
-    },
-    'Pane.position.wide': {
-      type: {
-        name: 'enum',
-        value: ['start', 'end'],
-      },
-      defaultValue: 'start',
-      control: {type: 'radio'},
-      table: {category: 'Pane props'},
-    },
     'Pane.width': {
       type: {
         name: 'enum',
@@ -341,11 +314,6 @@ const Template: Story = args => (
     {args['Render pane?'] ? (
       <SplitPageLayout.Pane
         resizable={args['Pane.resizable']}
-        position={{
-          narrow: args['Pane.position.narrow'],
-          regular: args['Pane.position.regular'],
-          wide: args['Pane.position.wide'],
-        }}
         width={args['Pane.width']}
         minWidth={args['Pane.minWidth']}
         sticky={args['Pane.sticky']}