How to make an image slider that turns into a grid on mobile?

Question

JavaScript

There is an image slider on a wordpress site that is displayed in a standard loop.

while ( $loop->have_posts() ): $loop->the_post(); ?>
  <div>
    <div class="img-wrapper">
       <?php if ( has_post_thumbnail()) {
             the_post_thumbnail('full','class=img-fluid');
        } ?>
    </div> 
   <?php endwhile; wp_reset_postdata(); ?>

How to make it so that on mobile resolutions, instead of a slider, display the bootstrap grid without calling the loop again?
I found how to disable the slider, through a repeated cycle - it's understandable, but I don't want to produce duplicates and hide it under the hood with styles.

Answer 1

Based on the thought of EvgenyMorozov , I found a solution, maybe someone will also find the thread useful (I'll give it briefly)
1. make such a wrapper - add the grid-row and grid-col classes to the frame , which will imitate the bootstrap grid.

<div class="slider grid-row" >
while ( $loop->have_posts() ): $loop->the_post(); ?>
  <div class="grid-col">
    <div class="img-wrapper">
       <?php if ( has_post_thumbnail()) {
             the_post_thumbnail('full','class=img-fluid');
        } ?>
    </div> 
   <?php endwhile; wp_reset_postdata(); ?>
</div>

2. Set the slider parameters for mobile permissions so that they are not initialized

{
          breakpoint: 480,
          settings: "unslick"
        }

3. Write classes that mimic the bootstrap grid

@media (max-width: 480px) {
  .product-row {    
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      margin-right: -15px;
      margin-left: -15px;
  }
  .product-col-6 {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
      flex: 0 0 50%;
      max-width: 50%;
      position: relative;
      width: 100%;
      min-height: 1px;
      padding-right: 15px;
      padding-left: 15px;
  }	
}

4. Voila! everything works without crooks and crutches

Answer 2

For example, add a condition

if(window.innerWidth > 600) {
$('.slider').slick({
    slidesToShow: 3,
    slidesToScroll: 3,
    dots: true,
    infinite: true,
    cssEase: 'linear',
    responsive: [
      {
        breakpoint: 480,
        settings: "unslick"
      }
    ]
});
}