diff --git a/src/components/page/page_header/__snapshots__/page_header.test.tsx.snap b/src/components/page/page_header/__snapshots__/page_header.test.tsx.snap
index 7aaa25a4649..e12a6fd3ea7 100644
--- a/src/components/page/page_header/__snapshots__/page_header.test.tsx.snap
+++ b/src/components/page/page_header/__snapshots__/page_header.test.tsx.snap
@@ -41,20 +41,20 @@ exports[`EuiPageHeader props alignItems bottom is rendered 1`] = `
         class="euiFlexItem emotion-euiFlexItem-growZero"
       >
         <div
-          class="euiFlexGroup emotion-euiFlexGroup-wrap-l-flexStart-stretch-rowReverse"
+          class="euiFlexGroup emotion-euiFlexGroup-wrap-l-flexStart-stretch-row"
         >
           <div
             class="euiFlexItem emotion-euiFlexItem-growZero"
           >
             <button>
-              Button 1
+              Button 2
             </button>
           </div>
           <div
             class="euiFlexItem emotion-euiFlexItem-growZero"
           >
             <button>
-              Button 2
+              Button 1
             </button>
           </div>
         </div>
@@ -87,20 +87,20 @@ exports[`EuiPageHeader props alignItems center is rendered 1`] = `
         class="euiFlexItem emotion-euiFlexItem-growZero"
       >
         <div
-          class="euiFlexGroup emotion-euiFlexGroup-wrap-l-flexStart-stretch-rowReverse"
+          class="euiFlexGroup emotion-euiFlexGroup-wrap-l-flexStart-stretch-row"
         >
           <div
             class="euiFlexItem emotion-euiFlexItem-growZero"
           >
             <button>
-              Button 1
+              Button 2
             </button>
           </div>
           <div
             class="euiFlexItem emotion-euiFlexItem-growZero"
           >
             <button>
-              Button 2
+              Button 1
             </button>
           </div>
         </div>
@@ -133,20 +133,20 @@ exports[`EuiPageHeader props alignItems stretch is rendered 1`] = `
         class="euiFlexItem emotion-euiFlexItem-growZero"
       >
         <div
-          class="euiFlexGroup emotion-euiFlexGroup-wrap-l-flexStart-stretch-rowReverse"
+          class="euiFlexGroup emotion-euiFlexGroup-wrap-l-flexStart-stretch-row"
         >
           <div
             class="euiFlexItem emotion-euiFlexItem-growZero"
           >
             <button>
-              Button 1
+              Button 2
             </button>
           </div>
           <div
             class="euiFlexItem emotion-euiFlexItem-growZero"
           >
             <button>
-              Button 2
+              Button 1
             </button>
           </div>
         </div>
@@ -179,20 +179,20 @@ exports[`EuiPageHeader props alignItems top is rendered 1`] = `
         class="euiFlexItem emotion-euiFlexItem-growZero"
       >
         <div
-          class="euiFlexGroup emotion-euiFlexGroup-wrap-l-flexStart-stretch-rowReverse"
+          class="euiFlexGroup emotion-euiFlexGroup-wrap-l-flexStart-stretch-row"
         >
           <div
             class="euiFlexItem emotion-euiFlexItem-growZero"
           >
             <button>
-              Button 1
+              Button 2
             </button>
           </div>
           <div
             class="euiFlexItem emotion-euiFlexItem-growZero"
           >
             <button>
-              Button 2
+              Button 1
             </button>
           </div>
         </div>
@@ -362,21 +362,21 @@ exports[`EuiPageHeader props page content props are passed down is rendered 1`]
       >
         <div
           aria-label="aria-label"
-          class="euiFlexGroup testClass1 testClass2 emotion-euiFlexGroup-responsive-wrap-l-flexStart-stretch-rowReverse"
+          class="euiFlexGroup testClass1 testClass2 emotion-euiFlexGroup-responsive-wrap-l-flexStart-stretch-row"
           data-test-subj="test subject string"
         >
           <div
             class="euiFlexItem emotion-euiFlexItem-growZero"
           >
             <button>
-              Button 1
+              Button 2
             </button>
           </div>
           <div
             class="euiFlexItem emotion-euiFlexItem-growZero"
           >
             <button>
-              Button 2
+              Button 1
             </button>
           </div>
         </div>
diff --git a/src/components/page/page_header/__snapshots__/page_header_content.test.tsx.snap b/src/components/page/page_header/__snapshots__/page_header_content.test.tsx.snap
index 81ef3a41a17..9539232bf9c 100644
--- a/src/components/page/page_header/__snapshots__/page_header_content.test.tsx.snap
+++ b/src/components/page/page_header/__snapshots__/page_header_content.test.tsx.snap
@@ -36,20 +36,20 @@ exports[`EuiPageHeaderContent props alignItems bottom is rendered 1`] = `
       class="euiFlexItem emotion-euiFlexItem-growZero"
     >
       <div
-        class="euiFlexGroup emotion-euiFlexGroup-wrap-l-flexStart-stretch-rowReverse"
+        class="euiFlexGroup emotion-euiFlexGroup-wrap-l-flexStart-stretch-row"
       >
         <div
           class="euiFlexItem emotion-euiFlexItem-growZero"
         >
           <button>
-            Button 1
+            Button 2
           </button>
         </div>
         <div
           class="euiFlexItem emotion-euiFlexItem-growZero"
         >
           <button>
-            Button 2
+            Button 1
           </button>
         </div>
       </div>
@@ -78,20 +78,20 @@ exports[`EuiPageHeaderContent props alignItems center is rendered 1`] = `
       class="euiFlexItem emotion-euiFlexItem-growZero"
     >
       <div
-        class="euiFlexGroup emotion-euiFlexGroup-wrap-l-flexStart-stretch-rowReverse"
+        class="euiFlexGroup emotion-euiFlexGroup-wrap-l-flexStart-stretch-row"
       >
         <div
           class="euiFlexItem emotion-euiFlexItem-growZero"
         >
           <button>
-            Button 1
+            Button 2
           </button>
         </div>
         <div
           class="euiFlexItem emotion-euiFlexItem-growZero"
         >
           <button>
-            Button 2
+            Button 1
           </button>
         </div>
       </div>
@@ -120,20 +120,20 @@ exports[`EuiPageHeaderContent props alignItems stretch is rendered 1`] = `
       class="euiFlexItem emotion-euiFlexItem-growZero"
     >
       <div
-        class="euiFlexGroup emotion-euiFlexGroup-wrap-l-flexStart-stretch-rowReverse"
+        class="euiFlexGroup emotion-euiFlexGroup-wrap-l-flexStart-stretch-row"
       >
         <div
           class="euiFlexItem emotion-euiFlexItem-growZero"
         >
           <button>
-            Button 1
+            Button 2
           </button>
         </div>
         <div
           class="euiFlexItem emotion-euiFlexItem-growZero"
         >
           <button>
-            Button 2
+            Button 1
           </button>
         </div>
       </div>
@@ -162,20 +162,20 @@ exports[`EuiPageHeaderContent props alignItems top is rendered 1`] = `
       class="euiFlexItem emotion-euiFlexItem-growZero"
     >
       <div
-        class="euiFlexGroup emotion-euiFlexGroup-wrap-l-flexStart-stretch-rowReverse"
+        class="euiFlexGroup emotion-euiFlexGroup-wrap-l-flexStart-stretch-row"
       >
         <div
           class="euiFlexItem emotion-euiFlexItem-growZero"
         >
           <button>
-            Button 1
+            Button 2
           </button>
         </div>
         <div
           class="euiFlexItem emotion-euiFlexItem-growZero"
         >
           <button>
-            Button 2
+            Button 1
           </button>
         </div>
       </div>
@@ -321,20 +321,20 @@ exports[`EuiPageHeaderContent props children is rendered even if content props a
       class="euiFlexItem emotion-euiFlexItem-growZero"
     >
       <div
-        class="euiFlexGroup emotion-euiFlexGroup-wrap-l-flexStart-stretch-rowReverse"
+        class="euiFlexGroup emotion-euiFlexGroup-wrap-l-flexStart-stretch-row"
       >
         <div
           class="euiFlexItem emotion-euiFlexItem-growZero"
         >
           <button>
-            Button 1
+            Button 2
           </button>
         </div>
         <div
           class="euiFlexItem emotion-euiFlexItem-growZero"
         >
           <button>
-            Button 2
+            Button 1
           </button>
         </div>
       </div>
@@ -500,20 +500,20 @@ exports[`EuiPageHeaderContent props rightSideItems is rendered 1`] = `
       class="euiFlexItem emotion-euiFlexItem-growZero"
     >
       <div
-        class="euiFlexGroup emotion-euiFlexGroup-wrap-l-flexStart-stretch-rowReverse"
+        class="euiFlexGroup emotion-euiFlexGroup-wrap-l-flexStart-stretch-row"
       >
         <div
           class="euiFlexItem emotion-euiFlexItem-growZero"
         >
           <button>
-            Button 1
+            Button 2
           </button>
         </div>
         <div
           class="euiFlexItem emotion-euiFlexItem-growZero"
         >
           <button>
-            Button 2
+            Button 1
           </button>
         </div>
       </div>
@@ -544,14 +544,14 @@ exports[`EuiPageHeaderContent props rightSideItems is rendered with rightSideGro
           class="euiFlexItem emotion-euiFlexItem-growZero"
         >
           <button>
-            Button 1
+            Button 2
           </button>
         </div>
         <div
           class="euiFlexItem emotion-euiFlexItem-growZero"
         >
           <button>
-            Button 2
+            Button 1
           </button>
         </div>
       </div>
diff --git a/src/components/page/page_header/page_header_content.tsx b/src/components/page/page_header/page_header_content.tsx
index 42ad7261939..372ad249a08 100644
--- a/src/components/page/page_header/page_header_content.tsx
+++ b/src/components/page/page_header/page_header_content.tsx
@@ -344,25 +344,20 @@ export const EuiPageHeaderContent: FunctionComponent<EuiPageHeaderContentProps>
 
   let rightSideFlexItem;
   if (rightSideItems && rightSideItems.length) {
-    const wrapWithFlex = () => {
-      return rightSideItems.map((item, index) => {
-        return (
-          <EuiFlexItem grow={false} key={index}>
-            {item}
-          </EuiFlexItem>
-        );
-      });
-    };
+    const itemsToRender = isResponsiveBreakpoint
+      ? rightSideItems
+      : [...rightSideItems].reverse();
+
+    const rightSideFlexItems = itemsToRender.map((item, index) => (
+      <EuiFlexItem grow={false} key={index}>
+        {item}
+      </EuiFlexItem>
+    ));
 
     rightSideFlexItem = (
       <EuiFlexItem grow={false}>
-        <EuiFlexGroup
-          wrap
-          responsive={false}
-          direction={isResponsiveBreakpoint ? undefined : 'rowReverse'}
-          {...rightSideGroupProps}
-        >
-          {wrapWithFlex()}
+        <EuiFlexGroup wrap responsive={false} {...rightSideGroupProps}>
+          {rightSideFlexItems}
         </EuiFlexGroup>
       </EuiFlexItem>
     );
diff --git a/upcoming_changelogs/6753.md b/upcoming_changelogs/6753.md
new file mode 100644
index 00000000000..e48088e25c9
--- /dev/null
+++ b/upcoming_changelogs/6753.md
@@ -0,0 +1,2 @@
+- Improved keyboard accessibility in `EuiPageHeader` by ensuring the right side menu items come into focus from left to right. 
+