Split loop to load WordPress gallery into Bootstrap modal and carousel

Question

I have created WordPress coding to loop through gallery images from a post, create a thumbnail gallery display in two cols (that resizes to one col at the mobile size, since the default WordPress gallery does not), and then load those images in a combination Bootstrap modal/carousel (by merging my code with modal/carousel code posted by css-tricks.com). I am happy with everything but the fact that I had to repeat my gallery loop to make the modal part happen. Does anyone know how to do this without repeating the loop?

The code section doesn't want to pick up the div at the start, which makes this work. It is div id="col-two-gallery" class="container-fluid" data-toggle="modal" data-target="#exampleModal"

if ( get_post_gallery() ) {

     $gallery        = get_post_gallery( get_the_ID(), false );
     $galleryIDS     = $gallery['ids'];
     $pieces         = explode(",", $galleryIDS);

     $gallery_count = 0;

     foreach ($pieces as $key => $value ) { 

          $gallery_custom_sm   = wp_get_attachment_image_src( $value, 'gallery-custom-sm'); 
          $image_full     = wp_get_attachment_image_src( $value, 'full'); 
          $attachment = wp_prepare_attachment_for_js($value);
    
     if($gallery_count % 2 == 0) { ?>
        <div class="row"> 
            <div class="col-sm-6 text-right">
                <img style="border:1px solid gray; padding:5px; margin-bottom:30px;" src="<?php echo $gallery_custom_sm[0]; ?>" alt="<?php echo $attachment['caption']; ?>" data-target="#carouselExample" data-slide-to="<?php echo $gallery_count; ?>"/>
            </div><!-- col-sm-6 -->

    <?php } else { ?>
        
            <div class="col-sm-6 text-left">
                <img style="border:1px solid gray; padding:5px; margin-bottom:30px;" src="<?php echo $gallery_custom_sm[0]; ?>" alt="<?php echo $attachment['caption']; ?>" data-target="#carouselExample" data-slide-to="<?php echo $gallery_count; ?>"/>
            </div><!-- col-sm-6 -->
        </div><!-- closes row -->
        <?php }
            $gallery_count++;
            }
            }
    ?>
</div><!-- col-2-gallery -->

<!-- Modal markup: https://getbootstrap.com/docs/4.4/components/modal/ -->

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog" style="width:60%; max-width:1250px" "role="document">
     <div class="modal-content" style="background-color:black !important;">
        <div class="modal-header" style="border:none">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
             <span aria-hidden="true">×</span>
          </button>
        </div><!-- modal-header -->
        <div class="modal-body">
            <div class="container-fluid">
              
            <!-- Carousel markup: https://getbootstrap.com/docs/4.4/components/carousel/ -->
            <div id="carouselExample" class="carousel slide" data-ride="carousel">
                 <div class="carousel-inner">
                 
                <?php if ( get_post_gallery() ) {
            
                 $gallery        = get_post_gallery( get_the_ID(), false );
                 $galleryIDS     = $gallery['ids'];
                 $pieces         = explode(",", $galleryIDS);
                 $carousel_count = 0;

                 foreach ($pieces as $key => $value ) { 
            
                      $gallery_custom_sm   = wp_get_attachment_image_src( $value, 'gallery-custom-sm');
                      $image_full     = wp_get_attachment_image_src( $value, 'full'); 
                      $attachment = wp_prepare_attachment_for_js($value);

             
                if( $carousel_count == 0 ){
                $active_item="active";
                        }
                        else
                        {
                        $active_item="";
                        }
                        ?>    
                    <div class="carousel-item <?php echo $active_item; ?>">
                      <img class="d-block" src="<?php echo $image_full[0] ?>" alt="<?php echo $attachment['caption']; ?>">
                        <p class="mt-3 text-white"><?php echo $attachment['caption']; ?></p>
                    </div><!-- carousel-item -->
                    <?php
                    $carousel_count++;
                  }
                  }             
                ?>
                                                        
                 <a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                 </a>
                 <a class="carousel-control-next" href="#carouselExample" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                 </a>
              </div><!-- carousel-inner -->
            </div><!-- carouselExample -->
            </div><!-- container-fluid -->

        <div class="modal-footer" style="border:none">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div><!-- modal-footer -->
        
    </div><!-- modal-content -->
 </div><!-- modal-dialog -->
</div><!-- modal -->