Bootstrap и PHP вызывают странное форматирование в сетке фотографий с использованием циклов

Question

В настоящее время я работаю над веб-сайтом по фотографии в качестве побочного проекта с использованием HTML, CSS, начальной загрузки и PHP. В настоящее время я извлекаю все изображения из указанных папок, например, images / senior или images / headshots. Это делается с помощью циклов PHP foreach. Проблема заключается в том, что после добавления 4 изображений в строку я создаю новую строку с 4 новыми столбцами, а не просто добавляю фотографии в существующие столбцы. Это создает разрыв форматирования между каждой строкой, особенно когда фотографии имеют разные размеры. Я ищу решение, которое будет непрерывно добавлять фотографии в столбцы один за другим, пока папка не будет исчерпана. Любая помощь будет высоко ценится, так как я все еще изучаю PHP и веб-разработки.

<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>

Пример изменения размера