I have successfully implemented a Bootstrap carousel to display 3 items in a row, which is working well. However, I am looking to modify it so that only one item is shown on smaller devices such as mobiles or tablets. Can anyone assist me with this? Below is the code snippet I am currently using:
<section id="services" class="service">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading" style="font-family:daniel; font-weight:bolder; font-size:40px; color:#F9121A;">WorkShops & Tracks</h2>
<hr class="primary">
</div>
</div>
</div><br>
<div id="myCarousel" class="carousel slide" data-ride="carousel" >
<div class="container">
<div class="row">
<!-- Indicators -->
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<div class="col-lg-4 col-md-4 text-center">
<div class="service-box">
<img src="img/img.jpg" class="text-primary sr-icons" width="200px" height="150px">
<h3 style="color:#F9121A;"></h3>
<p class="text-muted" >
</p>
<a href="#" class="btn btn-primary">Show Details</a>
</div>
</div>
<!-- Additional item markup here -->
</div>
<div class="item">
<div class="col-lg-4 col-md-4 text-center">
<div class="service-box">
<img src="img.jpg" class="text-primary sr-icons" width="200px" height="150px">
<h3 style="color:#F9121A;"></h3>
<p class="text-muted" >
</p>
<a href="#" class="btn btn-primary">Show Details</a>
</div>
</div>;
<!-- Additional item markup here -->
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</section>