Create a mixin .clear-sm to configure an element to clear the items above it only within a specified media query.

clear-sm-bootstrap.less

/* 
In a situation such as this markup
where we want columns to organize themselves
into two rows at on smaller screens.
This Bootstrap 3 markup gets us most of the way there.
<div class="col-sm-4 col-md-2">
...
<div class="col-sm-4 col-md-2">
...
<div class="col-sm-4 col-md-2">
...
<div class="about col-sm-12 col-md-6">
...

But the col-sm-12 will not clear the columns above it. 
Current Bootstrap docs suggest adding a div with a clearfix and utility class, like this:
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-sm"></div>

But this requires adding an extra unused element 

Instead we can create a .clear-sm mixin:
*/

.clear-sm {
	@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
		clear: both;
	}
}

/* 
And add that class to the element we want to fill a new row
at this breakpoint

<div class="about clear-sm col-sm-12 col-md-6">

*/