Responsive grids not laying out as expected

Created by: cfarquharson

If I wanted 4 columns in tablet or desktop but just two in mobile, then the code would be

<div class="row">
    <div class="col-6 col-lg-3">
        ...
    </div>
    <div class="col-6 col-lg-3">
        ...
    </div>
    <div class="col-6 col-lg-3">
        ...
    </div>
    <div class="col-6 col-lg-3">
        ...
    </div>
</div>

Because there is only one occurrence of the .row, but the grid cells in mobile are really two rows, wonky things happen when the content in the first grid cell is long....i.e. the other cells just stack up in a column, not in a row and the desired layout is not achieved. Added to this, it leaves large areas of unused white space.

Here`s an example:

http://jsfiddle.net/cfarquharson/kLwnK/1/