From b831ab40791aaabf90bf291e81ac02cef9a9e683 Mon Sep 17 00:00:00 2001
From: Dorian Zedler <dorian@itsblue.de>
Date: Fri, 29 Jul 2022 00:04:46 +0200
Subject: [PATCH] Feat: responsive layout

---
 src/pages/SpeedFlowchartPage.tsx | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/pages/SpeedFlowchartPage.tsx b/src/pages/SpeedFlowchartPage.tsx
index 2c9243e..131ae59 100644
--- a/src/pages/SpeedFlowchartPage.tsx
+++ b/src/pages/SpeedFlowchartPage.tsx
@@ -43,9 +43,18 @@ export default function SpeedFlowchartPage() {
 
   return (
     <>
-      <Grid container spacing={2}>
+      <Grid
+        container
+        spacing={2}
+        direction={{ xs: 'column-reverse', md: 'row' }}
+      >
         {flowchartResult?.rounds.map((round, roundKey) => (
-          <Grid key={`flowchart-column-${roundKey}`} item xs={12 / 5}>
+          <Grid
+            key={`flowchart-column-${roundKey}`}
+            item
+            xs={12}
+            md={12 / flowchartResult.rounds.length}
+          >
             <h3>{round.roundName}</h3>
             <Grid container spacing={2}>
               {round.pairs.map((pair, pairKey) => (