diff --git a/front_end/panels/timeline/components/MetricCard.test.ts b/front_end/panels/timeline/components/MetricCard.test.ts
index ff7a2f3dac..07d9347319 100644
--- a/front_end/panels/timeline/components/MetricCard.test.ts
+++ b/front_end/panels/timeline/components/MetricCard.test.ts
@@ -260,9 +260,9 @@ describeWithMockConnection('MetricCard', () => {
 
       const phaseTable = getPhaseTable(view);
       assert.deepEqual(phaseTable, [
-        ['TTFB', '400 ms', '500 ms'],
-        ['Phase 1', '10 ms', '0 ms'],
-        ['Phase 2', '100 ms', '124 ms'],
+        ['TTFB', '500 ms', '400 ms'],
+        ['Phase 1', '0 ms', '10 ms'],
+        ['Phase 2', '124 ms', '100 ms'],
       ]);
     });
   });
diff --git a/front_end/panels/timeline/components/MetricCard.ts b/front_end/panels/timeline/components/MetricCard.ts
index e26111f121..d955f3411d 100644
--- a/front_end/panels/timeline/components/MetricCard.ts
+++ b/front_end/panels/timeline/components/MetricCard.ts
@@ -584,22 +584,22 @@ export class MetricCard extends HTMLElement {
       <div class="phase-table" role="table">
         <div class="phase-table-row phase-table-header-row" role="row">
           <div role="columnheader" style="grid-column: 1">${i18nString(UIStrings.phase)}</div>
+          <div role="columnheader" class="phase-table-value" style="grid-column: 2">${i18nString(UIStrings.localValue)}</div>
           ${hasFieldData ? html`
             <div
               role="columnheader"
               class="phase-table-value"
-              style="grid-column: 2"
+              style="grid-column: 3"
               title=${i18nString(UIStrings.field75thPercentile)}>${i18nString(UIStrings.fieldP75)}</div>
           ` : nothing}
-          <div role="columnheader" class="phase-table-value" style=${hasFieldData ? 'grid-column: 3' : 'grid-column: 2'}>${i18nString(UIStrings.localValue)}</div>
         </div>
         ${phases.map(phase => html`
           <div class="phase-table-row" role="row">
             <div role="cell">${phase[0]}</div>
+            <div role="cell" class="phase-table-value">${i18n.TimeUtilities.preciseMillisToString(phase[1])}</div>
             ${phase[2] !== undefined ? html`
               <div role="cell" class="phase-table-value">${i18n.TimeUtilities.preciseMillisToString(phase[2])}</div>
             ` : nothing}
-            <div role="cell" class="phase-table-value">${i18n.TimeUtilities.preciseMillisToString(phase[1])}</div>
           </div>
         `)}
       </div>