clearing without a wrapping 'row' container

Question

Is there a way to clear after the last element of a row without a wrapping container per row? The column sizes inside will vary, there is a 'last' class, can I clear after that div is closed? I can't add anything to the markup.

Markup:

<div class="grid-row">
   <div class="col-6">
     col 6   
  </div>
  <div class="col-6 last">
     col 6   
  </div> 
 <!-- Need to clear here -->
  <div class="col-4">
      col 4   
  </div>
  <div class="col-4">
      col 4  
  </div>
  <div class="col-4 last">
      col 4  
  </div>
  <!-- Need to clear here -->
</div> 

Answer 1

For every .last column that has following siblings (is not the last child), you can simply introduce clearance with the next sibling:

.grid-row .last + div {
    clear: both;
}

As for the very last child, you can either use a clearfix :after pseudo-element on .grid-row:

.grid-row:after {
    content: '';
    display: table;
    clear: both;
}

Or you can have the element following .grid-row introduce clearance, in much the same way as the first CSS rule above.