Angular: custom line wrapping in chart toolbar

ng/src/app/components/server-data-chart/server-data-chart.component.html

@@ -7,12 +7,12 @@
     </span>
   </div>
   <div class="card-body">
-    <span class="d-flex flex-row">
-      <div class="badge bd-gray-100">
+    <span class="chart-toolbar">
+      <div class="badge bd-gray-100 chart-date chart-date-left">
         <fa-icon [icon]="fa.locationDot" class="pe-1"></fa-icon><fa-icon [icon]="fa.ellipsis" class="pe-1"></fa-icon>
         {{ start | date: 'YYYY-MM-dd HH:mm:ss' }}
       </div>
-      <div class="flex-fill text-center">
+      <div class="flex-fill text-center chart-zoom-btns">
         <div
           *ngFor="let zoomRange of zoomRanges; index as i"
           class="badge bg-secondary pointer"
@@ -25,7 +25,7 @@
           <fa-icon [icon]="fa.zoomPlus"></fa-icon>
         </div>
       </div>
-      <div class="badge bd-gray-100">
+      <div class="badge bd-gray-100 chart-date chart-date-right">
         {{ end | date: 'YYYY-MM-dd HH:mm:ss' }}
         <fa-icon [icon]="fa.ellipsis" class="ps-1"></fa-icon><fa-icon [icon]="fa.locationDot" class="ps-1"></fa-icon>
       </div>

ng/src/app/components/server-data-chart/server-data-chart.component.scss

@@ -1,8 +1,25 @@
 .card > .card-body {
-  .badge.bg-secondary {
-    &.active {
-      outline: 1px solid var(--bs-light);
-      color: var(--bs-light);
+  .chart-toolbar {
+    display: flex;
+
+    .chart-date {
+      &.chart-date-left {
+        order: 1;
+      }
+      &.chart-date-right {
+        order: 3;
+      }
+    }
+
+    .chart-zoom-btns {
+      order: 2;
+    }
+
+    .badge.bg-secondary {
+      &.active {
+        outline: 1px solid var(--bs-light);
+        color: var(--bs-light);
+      }
     }
   }
 
@@ -14,3 +31,25 @@
     }
   }
 }
+
+@media all and (max-width: 768px) {
+  .card > .card-body {
+    .chart-toolbar {
+      flex-wrap: wrap;
+      justify-content: space-between;
+
+      .chart-date {
+        &.chart-date-left {
+          order: 1;
+        }
+        &.chart-date-right {
+          order: 2;
+        }
+      }
+
+      .chart-zoom-btns {
+        order: 3;
+      }
+    }
+  }
+}