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

Question

Для сетки у меня есть код ниже.

Как видите, Example 2 код:

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

не работает, создал сетку.

Я хочу знать, есть ли возможность использовать нечто подобное, которое работает независимо от позиции класса col-. Я знаю, что могу добавить отдельный класс 'col' для чисел с плавающей запятой в html, но я предпочитаю этого не делать.

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

.red {
background-color: red;
}

.blue {
background-color: blue;

}

.row{ 
  width: 2200px;
  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>  

Answer 1

.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>