bootstrap grid scaling issue

Hi!

Im setting up a dynamic wordpress site on a bootstrap framework. I want a tiled frontpage with the different options of the company. The problem is the text underneath it, it makes the tiles 'jump' and not align properly as soon as the text covers 2 lines instead of only 1. Please see the following pictures:

The first picture shows the 'jump' because the text of the third tile covers 2 lines, the second picture is all good because it jumped from a 4 to a three tile width because of the media querie, the last picture shows the issue again as soon as it jumps to two tiles width. I need to figure out how to make the largest vertical gap between ANY of the tiles the base for all the other rows. In all situations I need the full text to stay completely visible underneath all tiles.

Shrinking down the text is also possible, but the "de mediterraanse keuken' text underneath the tile on the last screenshot would become to small I guess....

this is the code I have for generating the tiles:

           <?php if ( have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

  <div class="col-xs-6 col-sm-4 col-md-3 portfolio-piece">

      <?php
        $thumbnail_id = get_post_thumbnail_id(); 
        $thumbnail_url = wp_get_attachment_image_src( $thumbnail_id, 'thumbnail-size', true );
      ?>

      <div class="grid-item">
        <a href="<?php the_permalink(); ?>">
          <p class="grid-img-p img-rounded"><img class="img-rounded grid-img" src="<?php echo $thumbnail_url[0]; ?>" alt="<?php the_title();?> graphic"></p>
          <h4><?php the_title(); ?></h4>
        </a>
      </div>

  </div>

  <?php $portfolio_count = $the_query->current_post + 1; ?>
  <?php if ( $portfolio_count % 15 == 0): ?>

  </div><div class="row">

  <?php endif; ?>


  <?php endwhile; endif; ?>
            ``` 

Thanks for checking guys! really curious for the fix