diff --git a/defaultmodules/weather/forecast.njk b/defaultmodules/weather/forecast.njk
index 1b28ed2d2f..bd5ab79880 100644
--- a/defaultmodules/weather/forecast.njk
+++ b/defaultmodules/weather/forecast.njk
@@ -1,7 +1,7 @@
 {% if forecast %}
   {% set numSteps = forecast | calcNumSteps %}
   {% set currentStep = 0 %}
-  <table class="{{ config.tableClass }}">
+  <table class="{{ config.tableClass }} weather-forecast">
     {% if config.ignoreToday %}
       {% set forecast = forecast.splice(1) %}
     {% endif %}
@@ -21,20 +21,20 @@
         <td class="bright weather-icon">
           <span class="wi weathericon wi-{{ f.weatherType }}"></span>
         </td>
-        <td class="align-right bright max-temp">{{ f.maxTemperature | roundValue | unit("temperature") | decimalSymbol }}</td>
         <td class="align-right min-temp">{{ f.minTemperature | roundValue | unit("temperature") | decimalSymbol }}</td>
-        {% if config.showPrecipitationAmount %}
-          <td class="align-right bright precipitation-amount">{{ f.precipitationAmount | unit("precip", f.precipitationUnits) }}</td>
-        {% endif %}
-        {% if config.showPrecipitationProbability %}
-          <td class="align-right bright precipitation-prob">{{ f.precipitationProbability | unit('precip', '%') }}</td>
-        {% endif %}
+        <td class="align-right bright max-temp">{{ f.maxTemperature | roundValue | unit("temperature") | decimalSymbol }}</td>
         {% if config.showUVIndex %}
           <td class="align-right dimmed uv-index">
             {{ f.uvIndex }}
             <span class="wi dimmed weathericon wi-hot"></span>
           </td>
         {% endif %}
+        {% if config.showPrecipitationAmount %}
+          <td class="align-right bright precipitation-amount">{{ f.precipitationAmount | unit("precip", f.precipitationUnits) }}</td>
+        {% endif %}
+        {% if config.showPrecipitationProbability %}
+          <td class="align-right bright precipitation-prob">{{ f.precipitationProbability | unit('precip', '%') }}</td>
+        {% endif %}
       </tr>
       {% set currentStep = currentStep + 1 %}
     {% endfor %}
diff --git a/defaultmodules/weather/weather.css b/defaultmodules/weather/weather.css
index d6e8ad8065..1320ea665b 100644
--- a/defaultmodules/weather/weather.css
+++ b/defaultmodules/weather/weather.css
@@ -11,6 +11,11 @@
   padding-bottom: 6px;
 }
 
+.weather .weather-forecast tr {
+  display: flex;
+  align-items: baseline;
+}
+
 .weather .day {
   padding-left: 0;
   padding-right: 25px;
@@ -22,10 +27,14 @@
 }
 
 .weather .min-temp {
-  padding-left: 20px;
+  padding-left: 0;
   padding-right: 0;
 }
 
+.weather .max-temp {
+  padding-left: 20px;
+}
+
 .weather .precipitation-amount,
 .weather .precipitation-prob,
 .weather .humidity-hourly,
@@ -34,6 +43,34 @@
   padding-right: 0;
 }
 
+.weather .weather-forecast .day {
+  order: var(--weather-forecast-day-order, 1);
+}
+
+.weather .weather-forecast .weather-icon {
+  order: var(--weather-forecast-icon-order, 2);
+}
+
+.weather .weather-forecast .min-temp {
+  order: var(--weather-forecast-min-temp-order, 3);
+}
+
+.weather .weather-forecast .max-temp {
+  order: var(--weather-forecast-max-temp-order, 4);
+}
+
+.weather .weather-forecast .uv-index {
+  order: var(--weather-forecast-uv-index-order, 5);
+}
+
+.weather .weather-forecast .precipitation-amount {
+  order: var(--weather-forecast-precipitation-amount-order, 6);
+}
+
+.weather .weather-forecast .precipitation-prob {
+  order: var(--weather-forecast-precipitation-prob-order, 7);
+}
+
 .weather tr.colored .min-temp {
   color: #bcddff;
 }
diff --git a/tests/e2e/modules/weather_forecast_spec.js b/tests/e2e/modules/weather_forecast_spec.js
index 435cc98ce5..d6524a69a3 100644
--- a/tests/e2e/modules/weather_forecast_spec.js
+++ b/tests/e2e/modules/weather_forecast_spec.js
@@ -34,7 +34,7 @@ describe("Weather module: Weather Forecast", () => {
 		const maxTemps = ["24.4°", "21.0°", "22.9°", "23.4°", "20.6°"];
 		for (const [index, temp] of maxTemps.entries()) {
 			it(`should render max temperature ${temp}`, async () => {
-				const maxTempCell = page.locator(`.weather table.small tr:nth-child(${index + 1}) td:nth-child(3)`);
+				const maxTempCell = page.locator(`.weather table.small tr:nth-child(${index + 1}) td.max-temp`);
 				await expect(maxTempCell).toHaveText(temp);
 			});
 		}
@@ -42,7 +42,7 @@ describe("Weather module: Weather Forecast", () => {
 		const minTemps = ["15.3°", "13.6°", "13.8°", "13.9°", "10.9°"];
 		for (const [index, temp] of minTemps.entries()) {
 			it(`should render min temperature ${temp}`, async () => {
-				const minTempCell = page.locator(`.weather table.small tr:nth-child(${index + 1}) td:nth-child(4)`);
+				const minTempCell = page.locator(`.weather table.small tr:nth-child(${index + 1}) td.min-temp`);
 				await expect(minTempCell).toHaveText(temp);
 			});
 		}
@@ -78,7 +78,7 @@ describe("Weather module: Weather Forecast", () => {
 		});
 
 		it("should render custom table class", async () => {
-			await expect(page.locator(".weather table.myTableClass")).toBeVisible();
+			await expect(page.locator(".weather table.myTableClass.weather-forecast")).toBeVisible();
 		});
 
 		it("should render colored rows", async () => {
@@ -86,6 +86,14 @@ describe("Weather module: Weather Forecast", () => {
 			await expect(rows).toHaveCount(5);
 		});
 
+		it("should expose forecast column order through CSS", async () => {
+			const minTempCell = page.locator(".weather table.myTableClass tr:first-child td.min-temp");
+			const maxTempCell = page.locator(".weather table.myTableClass tr:first-child td.max-temp");
+
+			await expect(minTempCell).toHaveCSS("order", "3");
+			await expect(maxTempCell).toHaveCSS("order", "4");
+		});
+
 		const precipitations = [undefined, "2.51 mm"];
 		for (const [index, precipitation] of precipitations.entries()) {
 			if (precipitation) {
@@ -107,7 +115,7 @@ describe("Weather module: Weather Forecast", () => {
 			const temperatures = ["75_9°", "69_8°", "73_2°", "74_1°", "69_1°"];
 			for (const [index, temp] of temperatures.entries()) {
 				it(`should render custom decimalSymbol = '_' for temp ${temp}`, async () => {
-					const tempCell = page.locator(`.weather table.small tr:nth-child(${index + 1}) td:nth-child(3)`);
+					const tempCell = page.locator(`.weather table.small tr:nth-child(${index + 1}) td.max-temp`);
 					await expect(tempCell).toHaveText(temp);
 				});
 			}