Anzeige eines Artikels in einer Reihe bei Karussells auf kleinen und mittleren Geräten

Question

Ich habe Bootstrap Karussell verwendet, um 3 Elemente in einer Zeile anzuzeigen, und es funktioniert auf eine gute Weise. Aber ich möchte nur einen Gegenstand für die kleinen Geräte (Handys oder Tablets) zeigen. Kann mir bitte jemand helfen? Hier ist der Code I

<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 &amp; 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> 

        <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> 

        <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"><br><br> 
          <h3 style="color:#F9121A;"></h3> 
          <p class="text-muted" > 

          </p> 
          <a href="#" class="btn btn-primary">Show Details</a> 
         </div> 
        </div> 
       </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> 

        <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> 

        <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> 

       </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> 

Answer 1

verwendet haben, würde ich eine Medienabfrage mit Javascript verwenden. https://www.sitepoint.com/javascript-media-queries/