diff --git a/src/dashboard/example/components/ScoreboardPanel.vue b/src/dashboard/example/components/ScoreboardPanel.vue
index 2163f48..c99bba6 100644
--- a/src/dashboard/example/components/ScoreboardPanel.vue
+++ b/src/dashboard/example/components/ScoreboardPanel.vue
@@ -576,8 +576,8 @@ watchEffect(() => {
       </div>
     </div>
 
-    <div class="row q-col-gutter-lg items-start">
-      <div class="col-12 col-md-5">
+    <div class="scoreboard-grid">
+      <div class="scoreboard-grid__side">
         <QCard
           flat
           bordered
@@ -682,7 +682,7 @@ watchEffect(() => {
         </QCard>
       </div>
 
-      <div class="col-12 col-md-2">
+      <div class="scoreboard-grid__center">
         <QCard
           flat
           bordered
@@ -720,7 +720,7 @@ watchEffect(() => {
         </QCard>
       </div>
 
-      <div class="col-12 col-md-5">
+      <div class="scoreboard-grid__side">
         <QCard
           flat
           bordered
@@ -834,4 +834,26 @@ watchEffect(() => {
   flex-direction: column;
   gap: 16px;
 }
+
+.scoreboard-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 24px;
+  align-items: start;
+}
+
+.scoreboard-grid__side,
+.scoreboard-grid__center {
+  min-width: 0;
+}
+
+@media (min-width: 1024px) {
+  .scoreboard-grid {
+    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  }
+
+  .scoreboard-grid__center {
+    width: 220px;
+  }
+}
 </style>
diff --git a/src/dashboard/example/views/Dashboard.vue b/src/dashboard/example/views/Dashboard.vue
index 60dbdeb..eec0599 100644
--- a/src/dashboard/example/views/Dashboard.vue
+++ b/src/dashboard/example/views/Dashboard.vue
@@ -11,29 +11,27 @@ useHead({ title: 'Dashboard' });
 
 <template>
   <QPage class="q-pa-lg">
-    <div class="row q-col-gutter-lg items-start dashboard-panels q-mt-lg">
-      <div class="col-12 col-lg-6">
-        <div class="column q-gutter-lg">
-          <QCard
-            bordered
-            class="dashboard-panel-card"
-          >
-            <QCardSection class="dashboard-panel-content">
-              <ScoreboardPanel />
-            </QCardSection>
-          </QCard>
-
-          <QCard
-            bordered
-            class="dashboard-panel-card"
-          >
-            <QCardSection class="dashboard-panel-content">
-              <CommentaryPanel />
-            </QCardSection>
-          </QCard>
-        </div>
+    <div class="dashboard-panels q-mt-lg">
+      <div class="dashboard-row dashboard-row--scoreboard">
+        <QCard
+          bordered
+          class="dashboard-panel-card"
+        >
+          <QCardSection class="dashboard-panel-content">
+            <ScoreboardPanel />
+          </QCardSection>
+        </QCard>
       </div>
-      <div class="col-12 col-lg-6">
+
+      <div class="dashboard-row dashboard-row--bottom">
+        <QCard
+          bordered
+          class="dashboard-panel-card"
+        >
+          <QCardSection class="dashboard-panel-content">
+            <CommentaryPanel />
+          </QCardSection>
+        </QCard>
         <QCard
           bordered
           class="dashboard-panel-card"
@@ -50,6 +48,19 @@ useHead({ title: 'Dashboard' });
 <style scoped>
 .dashboard-panels {
   width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.dashboard-row {
+  width: 100%;
+}
+
+.dashboard-row--bottom {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 24px;
 }
 
 .dashboard-panel-card {
@@ -59,4 +70,10 @@ useHead({ title: 'Dashboard' });
 .dashboard-panel-content {
   padding-bottom: 16px;
 }
+
+@media (min-width: 1200px) {
+  .dashboard-row--bottom {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
 </style>