take implementation changes back

Author: broccolinisoup

src/PageLayout/PageLayout.tsx

@@ -564,7 +564,7 @@ const Pane = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageLayout
     {
       'aria-label': label,
       'aria-labelledby': labelledBy,
-      position: responsivePosition = undefined,
+      position: responsivePosition = 'end',
       positionWhenNarrow = 'inherit',
       width = 'medium',
       minWidth = 256,
@@ -712,10 +712,12 @@ const Pane = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageLayout
             {
               // Narrow viewports
               display: isHidden ? 'none' : 'flex',
-              order: position !== undefined ? panePositions[position] : undefined,
+              order: panePositions[position],
               width: '100%',
               marginX: 0,
-
+              ...(position === 'end'
+                ? {flexDirection: 'column', marginTop: SPACING_MAP[rowGap]}
+                : {flexDirection: 'column-reverse', marginBottom: SPACING_MAP[rowGap]}),
               // Regular and wide viewports
               [`@media screen and (min-width: ${theme.breakpoints[1]})`]: {
                 width: 'auto',
@@ -729,7 +731,9 @@ const Pane = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageLayout
                       maxHeight: 'var(--sticky-pane-height)',
                     }
                   : {}),
-                ...(position === 'end' ? {flexDirection: 'row'} : {flexDirection: 'row-reverse'}),
+                ...(position === 'end'
+                  ? {flexDirection: 'row', marginLeft: SPACING_MAP[columnGap]}
+                  : {flexDirection: 'row-reverse', marginRight: SPACING_MAP[columnGap]}),
               },
             },
             sx,