Estoy haciendo un menú cuadriculado con Bootstrap siguiendo esta estructura:
<div class="col-md-4 col-sm-4 col-xs-4">
<a href="Account/frm_ghorarios" class="well-grid">
<div class="well text-center">
<h1 class="well-h1">Grupos horarios</h1>
<i class="fa fa-clock-o fa-big" aria-hidden="true"></i><i style="margin-left: -4px;" class="fa fa-clock-o fa-big" aria-hidden="true"></i>
<br>
<br>
</div>
</a>
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<a href="Account/frm_editar_marcajes" class="well-grid">
<div class="well text-center">
<h1 class="well-h1">Editar turnos</h1>
<i class="fa fa-pencil fa-big" aria-hidden="true"></i>
<br>
<br>
</div>
</a>
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<a href="Account/frm_editar_marcajes_a" class="well-grid">
<div class="well text-center">
<h1 class="well-h1">Editar actividades</h1>
<i class="fa fa-pencil fa-big" aria-hidden="true"></i>
<br>
<br>
</div>
</a>
</div>
El problema lo tengo cuando, al encoger mucho la pantalla, el h1 no cabe en una línea y se separa en dos, dejando los cuadros con distinto tamaño. He creado media queries para encoger el tamaño de la letra junto con el "white-space: nowrap;", pero para pantallas pequeñas acaba por no leerse
Alguna idea?
Gracias de antemano