To achieve your desired outcome, you can duplicate all the images into a separate section, toggle between them based on screen size, and utilize the Owl Carousel library () for mobile devices.
Using a carousel library rather than building one from scratch saves time and effort, especially when implementing Touch and Drag support.
HTML
<div class="container">
<!-- Display as block until md breakpoint (768px) -->
<section class="owl-carousel owl-theme d-md-none">
<div class="item">
<img class="img-fluid" alt="image 1" />
</div>
<div class="item">
<img class="img-fluid" alt="image 2" />
</div>
<div class="item">
<img class="img-fluid" alt="image 3" />
</div>
</section>
<!-- Display none until md breakpoint (768px), as block after -->
<section class="gallery d-none d-md-block">
<div class="row">
<div class="col">
<img class="img-fluid" alt="image 1" />
</div>
<div class="col">
<img class="img-fluid" alt="image 2" />
</div>
<div class="col">
<img class="img-fluid" alt="image 3" />
</div>
</div>
</section>
</div>
This setup allows displaying the carousel section only on screens less than 768px width, and showing the gallery section otherwise.
JavaScript
$(function() {
$('.owl-carousel').owlCarousel({
margin: 10,
nav: true,
items: 1
});
});
By using this script, the carousel will be transformed into touch-enabled with drag functionality. For more details, refer to the documentation:
Result
On small screen:
https://i.sstatic.net/1AXhg.png
On larger screen:
https://i.sstatic.net/e4rF4.png
fiddle: http://jsfiddle.net/aq9Laaew/243804/