Forzar el cambio de fila

Mediante la clase .clearfix podemos forzar el cambio de fila cuando nosotros queremos. Esta clase nos puede ser útil cuando por ejemplo las filas tengan un alto distinto o para forzar el cambio de fila solo para determinados tamaños de pantalla mediante la combinación con otras clases (por ejemplo si añadimos visible-xs-block solo se producirá ese cambio de fila para pantallas pequeñas).

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

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

En la siguiente imagen podemos ver un ejemplo en el que no se ha utilizado la clase .clearfix y debido a que las dos primeras columnas tienen un alto distinto la primera columna de la siguiente fila se coloca en una posición incorrecta:

Responsive column resets

Si añadimos la clase .clearfix como en el código de ejemplo podemos solucionar ese problema, quedando:

Responsive column resets