How to split a row into multiple rows when using Flexbox grid?

Created by: cyrildc

When enabling flex to create an auto-layout column, the colum reset with the use of .clearfix doen't work.

<div class="row">
<div class="col">1 </div>
<div class="col">2</div>
<div class="clearfix"></div>
<div class="col">3</div>
<div class="col">4</div>    
</div>

We get: instead of the expected result: