Q:

css responsivo desalinhado

Olá, pessoal!
Tenho uma galeria de imagem vinda de um banco de dados que desconfigura alguns itens quando a resolução da tela e reduzida para 1150px. Isso se faz quando o titulo embaixo da imagem é muito grande e realiza uma quebra de linha.
Alguém poderia me ajudar? 
Desde já agradeço!
<div class="row" align="center">
<div class="col-md-12 col-sm-12">

    <?php
    foreach($currentMovies as $movie){

        if($movie['poster_path'] == null) {
            $posterPath = $path . '../wp-content/uploads/2017/08/noPoster.png';
        }else {
            if(substr($movie['poster_path'], 0, 7) == '/webnet') {
                $posterPath = $path .'../movies/uploads' . $movie['poster_path'];
            } else {
                $posterPath = 'https://image.tmdb.org/t/p/w500' . $movie['poster_path'];
            }
        }
        ?>

        <figure class="col-md-3 col-sm-6">
            <a href="<?=$path;?>filme/?id=<?php echo $movie['id']; ?>&filme=<?php echo $movie['title']; ?>">
                <img class="img_poster" src="<?=$posterPath;?>" style="max-height: 270px; max-width:200px;" alt="<?php echo $movie['title']; ?>">
                <h5 class="tlt_movice" style="color:#ca0088; margin-top:-8px;">
                    <?php echo $movie['title']; ?>
                </h5>
            </a>

        </figure>
    <?php 
    } 
    ?>

    <style>
        @media (max-width: 1153px) 
        {
        }
    </style>
</div> <!-- closes div col-md-12 -->

 

A:

O problema é que seu grid é baseado em float, ai quando um dos irmão tem a altura maior que a dos outros o grid quebra.
Uma forma simples de corrigir isso é transformando o container pai em um container flex. Desa forma quando chegar breacking point para telas MD max-width: 765px vc volta o display do container pai para initial e agora os filhos vão se alinhar um abaixo do outro.

Seguo o código referente a imagem acima:

.pai {
  display:flex; 
  flex-wrap: wrap;
}
@media screen and (max-width: 765px) {
  .pai {
    display:initial; 
  }
}
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

<div class="row" align="center">
  <div class="col-md-12 col-sm-12 pai">

    <figure class="col-md-3 col-sm-6">
        <a href="#">
            <img class="img_poster" src="https://placecage.com/100/100" style="max-height: 270px; max-width:200px;" >
            <h5 class="tlt_movice" style="color:#ca0088; margin-top:-8px;">
                ?php echo $movie['title']; ?
            </h5>
        </a>
    </figure>
    <figure class="col-md-3 col-sm-6">
        <a href="#">
            <img class="img_poster" src="https://placecage.com/100/100" style="max-height: 270px; max-width:200px;" >
            <h5 class="tlt_movice" style="color:#ca0088; margin-top:-8px;">
                ?php echo $movie['title']; ? Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste, libero!
            </h5>
        </a>
    </figure>
    <figure class="col-md-3 col-sm-6">
        <a href="#">
            <img class="img_poster" src="https://placecage.com/100/100" style="max-height: 270px; max-width:200px;" >
            <h5 class="tlt_movice" style="color:#ca0088; margin-top:-8px;">
                ?php echo $movie['title']; ? 
            </h5>
        </a>
    </figure>
    <figure class="col-md-3 col-sm-6">
        <a href="#">
            <img class="img_poster" src="https://placecage.com/100/100" style="max-height: 270px; max-width:200px;" >
            <h5 class="tlt_movice" style="color:#ca0088; margin-top:-8px;">
                ?php echo $movie['title']; ?
            </h5>
        </a>
    </figure>

    <figure class="col-md-3 col-sm-6">
        <a href="#">
            <img class="img_poster" src="https://placecage.com/100/100" style="max-height: 270px; max-width:200px;" >
            <h5 class="tlt_movice" style="color:#ca0088; margin-top:-8px;">
                ?php echo $movie['title']; ?
            </h5>
        </a>
    </figure>
    <figure class="col-md-3 col-sm-6">
        <a href="#">
            <img class="img_poster" src="https://placecage.com/100/100" style="max-height: 270px; max-width:200px;" >
            <h5 class="tlt_movice" style="color:#ca0088; margin-top:-8px;">
                ?php echo $movie['title']; ?
            </h5>
        </a>
    </figure>
    <figure class="col-md-3 col-sm-6">
        <a href="#">
            <img class="img_poster" src="https://placecage.com/100/100" style="max-height: 270px; max-width:200px;" >
            <h5 class="tlt_movice" style="color:#ca0088; margin-top:-8px;">
                ?php echo $movie['title']; ? Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste, libero!
            </h5>
        </a>
    </figure>
    <figure class="col-md-3 col-sm-6">
        <a href="#">
            <img class="img_poster" src="https://placecage.com/100/100" style="max-height: 270px; max-width:200px;" >
            <h5 class="tlt_movice" style="color:#ca0088; margin-top:-8px;">
                ?php echo $movie['title']; ?
            </h5>
        </a>
    </figure>
  </div>
</div>  
  

