Masonry grid with bootstrap 4

I have the following code that is supposed to display a masonry grid using bootstrap 4. I've tested the code but the grid will not be displayed correctly on desktop and tablets. On mobile instead there is no problem with the columns. Is there a way to fix this issue? I've loaded the masonry.js script and I've used the snippet that I've found inside the masonry official documentations.

?php
$args = array(
  'post_type' = 'post',
  'category_name' = 'portfolio',
  'post_per_page' = '6'
);
$portfolio = new WP_Query($args);
$widths = array('3','4','5');
?


  div class="row grid"
?php if( $portfolio-have_posts() ): while( $portfolio-have_posts() ): $portfolio-the_post();  ?
    !-- add sizing element for columnWidth --
    div class="grid-sizer col-sm-12 col-lg-3"/div
    !-- items use Bootstrap .col- classes --
    div class="grid-item col-sm-12 col-?php echo 'md-' . array_shift($widths); ? col-?php echo 'lg-' . array_shift($widths); ?"
      !-- wrap item content in its own element --
      div class="grid-item-content"
        a href="?php the_permalink(); ?"
        img class="card-img-top w-100" src="?php the_post_thumbnail_url('small'); ?" id="case-studies"
        div class="overlay-title"
          h4 class="text-center" id="client-name"?php the_title(); ?/h4
        /div
        /a
      /div
    /div
?php endwhile; ?
?php endif; wp_reset_postdata(); ?
  /div