diff --git a/src/panels/lovelace/cards/hui-weather-forecast-card.ts b/src/panels/lovelace/cards/hui-weather-forecast-card.ts
index 2d9adf3356..576b908636 100644
--- a/src/panels/lovelace/cards/hui-weather-forecast-card.ts
+++ b/src/panels/lovelace/cards/hui-weather-forecast-card.ts
@@ -182,9 +182,6 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
           </div>
           <div class="info">
             <div class="name-state">
-              <div class="name">
-                ${this._config.name || computeStateName(stateObj)}
-              </div>
               <div class="state">
                 ${computeStateDisplay(
                   this.hass.localize,
@@ -192,6 +189,9 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
                   this.hass.language
                 )}
               </div>
+              <div class="name">
+                ${this._config.name || computeStateName(stateObj)}
+              </div>
             </div>
             <div class="temp-attribute">
               <div class="temp">
@@ -377,13 +377,13 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
         top: 1px;
       }
 
-      .name,
+      .state,
       .temp-attribute .temp {
         font-size: 28px;
         line-height: 1.2;
       }
 
-      .state,
+      .name,
       .attribute {
         font-size: 14px;
         line-height: 1;
@@ -440,7 +440,7 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
 
       .attribute,
       .templow,
-      .state {
+      .name {
         color: var(--secondary-text-color);
       }
 
@@ -469,7 +469,7 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
         --mdc-icon-size: 52px;
       }
 
-      :host([narrow]) .name,
+      :host([narrow]) .state,
       :host([narrow]) .temp-attribute .temp {
         font-size: 22px;
       }
@@ -485,7 +485,7 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
 
       /* ============= VERY NARROW ============= */
 
-      :host([veryNarrow]) .state,
+      :host([veryNarrow]) .name,
       :host([veryNarrow]) .attribute {
         display: none;
       }