Alinear verticalmente en Bootstrap 3

Hacía ya tiempo desde mi última publicación en el blog, no os voy a aburrir con los motivos, así que como he encontrado un tema de interes que me ha costado resolver voy directamente al grano.

Estoy desarrollando una página web y entre otras muchas cosas utilizo Bootstrap 3. Se que lo que voy a contar Bootstrap 4 ya lo resuelve de forma sencilla con un par de clases, pero esta entrada va más bien dirigida para aquellos que todavía tienen sus diseños bajo Bootstrap 3 y no han migrado a la nueva versión.

El problema surgió cuando en una página sobre 2 columnas quería centrar verticalmente el contenido de una de ellas, en concreto una foto, buscando en internet, que gran fuente de información la verdad sea dicha, encontré varias soluciones, pero por unas cosas o por otras ninguna acababa de resolver el problema. Hasta que di con una entrada en la web Code Q&A donde se trataba este tema con éxito, al menos para lo que yo buscaba.

Vamos al grano, el tema básicamente es hacer flexible el div row contenedor y alinear verticalmente todos sus elementos, en este caso las columnas, ¿Cómo hacemos esto?, tan simple como crear una clase de css y darle las siguientes propiedades:
.vertical-align { display: flex; align-items: center; }

Una vez creada la clase se la asociamos al div row que queramos hacer flexible:

<div class="container">  
<div class="row vertical-align"> <!-- Aquí añadimos la clase --> 
<div class="col-xs-12 col-sm-6"> ... </div>  
<div class="col-xs-12 col-sm-6"> ... </div> 
</div> 
</div>

Pero aquí me encontré con otro problema cuando el diseño se hacía responsive para formatos col-xs (teléfonos móviles)no funcionaba correctamente, en mi caso solo se mostraba una de las columnas la otra desaparecía. Esto se debe a que Bootstrap 3 no especifica el ancho de las columnas en dispositivos extra pequeños (xs). Como en ese formato ya el flexbox no lo iba a usar (no tiene sentido centrar verticalmente una única columna), la solución a este problema fue usar las media queries para en fomratos xs desactivar el diseño flexbox. ¿Esto cómo se hace?, creando una media querie para añadir al css de la página, en concreto yu usé esta:

/* Extra small devices (767px and down) */ 
@media (max-width: 767px) { 
 .vertical-align { 
  display: block; /* Elimina el flexbox del row */ 
   } 
}

Y voilá en mi diseño al menos problema resuelto. Espero que a alguno más le sirva de ayuda, al menos esa es la intención de esto.

Hasta la próxima.