Сетка CSS с плавающей точкой, не работает, если класс, который устанавливает ширину, не первый

.red, .blue {
  color: white;
  height: 100px;
}

.red {
background-color: red;
}

.blue {
background-color: blue;

}

.row{ 

  width: 100%;
  overflow: auto;
 }
 
.row::after {
  content: "";
  clear: both;
  display: table;
}

[class*="col-"] {
    float: left;
}

.col-3 {
    width: 30%;
}


.col-7 {
    width: 70%;
}

<div class="row">
  <h1> Example 1</h1> 
  <div class="col-3 red">lorem ipsum</div>
  <div class="col-7 blue">ipsum ipsum</div>
</div>  

<div class="row">
  <h1> Example 2</h1> 
  <div class="red col-3">lorem ipsum</div>
  <div class="blue col-7">ipsum ipsum</div>
</div>