Ver índice de contenidos del libro

2.3. Reseteando columnas

Como las rejillas de Bootstrap tienen cuatro puntos de ruptura en los que las columnas se reordenan, es casi seguro que te vas a encontrar con problemas cuando las columnas tengan diferente altura. Para solucionarlo, utiliza la clase .clearfix combinándola con alguna de las clases auxiliares tipo .visible-xs:

<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>
 
  <!-- La clase 'clearfix' sólo se aplica cuando el dispositivo sea
       muy pequeño, tal y como indica la clase 'visible-xs' -->
  <div class="clearfix visible-xs"></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>

También es posible que en ocasiones necesites resetear los desplazamientos de las columnas. Las clases que resetean estos valores sólo están disponibles para los dispositivos medianos y grandes, que los desplazamientos sólo funcionan en esos dispositivos.

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>
 
<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>