Bootstrap和PHP使用循环在照片网格中导致奇怪的格式

Question

I am currently working on a photography website as side project using HTML, CSS, bootstrap, and PHP. Currently, I am pulling all images from their specified folders e.g. images/senior, or images/headshots. This is done using PHP foreach loops. The problem lies in that after 4 images are added to a row, I am creating a new row with 4 new columns, instead of just adding the photos to existing columns. This creates a formatting gap between each rows, especially when photos are different sizes. I am looking for a solution that will continually add photos to columns one by one until the folder is exhausted. Any help will be much appreciated as I am still learning PHP and Web dev.

<div class="lightgallery1">
    <div class="row">

    <h2 id = "portrait" class="headingCursiveSM">Portraiture</h2>

    <?php 
          $dirname = "images/portrait/";
          $images = glob($dirname."*.jpg");
          $x = 0;
          foreach($images as $image) {
              ++$x;
              echo '<div class="col-md-3">
                            <div class="thumbnail">
                            <a href="'.$image.'" data-lightbox="portGallery" >
                            <img class = "img-responsive lazyload" data-src="'.$image.'" src="images/blank.jpg" alt="'.$image.'">
                            </a>
                            </div>
                    </div>';
                    if(($x % 4) == 0 ){
                      echo '</div>
                            <div class = "row">';
                    }
          }
         ?>
          </div>
     </div>

Example of size variation