Css 移动视图中的媒体传送带

我有这个代码，将显示图像转盘

对于台式机，我希望每行显示3个缩略图； 对于手机，水平方向上每行只有一到两个缩略图

desktopview中的代码工作正常，但在mobileview中，如何水平显示只有一个或两个图像，并使用指示器查看下一个图像

我试过用这个，但不起作用

<div class="col-sm-6 col-md-4">

js

---

基本上你需要一个知道分组的旋转木马。Slick是第一个出现在脑海中的，但请随意（重新）搜索更多。您只需将所有元素作为兄弟元素放置，并告诉旋转木马何时以及如何将它们分组到一张幻灯片中。

<div class="container">
      <div class="row">
        <h2>Media Slider Carousel BS3</h2>
      </div>
      <div class='row'>
        <div class='col-md-8'>
          <div class="carousel slide media-carousel" id="media">
            <div class="carousel-inner">
              <div class="item  active">
                <div class="row">
                  <div class="col-md-4">
                    <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
                  </div>          
                  <div class="col-md-4">
                    <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
                  </div>
                  <div class="col-md-4">
                    <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
                  </div>        
                </div>
              </div>
              <div class="item">
                <div class="row">
                  <div class="col-md-4">
                    <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
                  </div>          
                  <div class="col-md-4">
                    <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
                  </div>
                  <div class="col-md-4">
                    <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
                  </div>        
                </div>
              </div>
              <div class="item">
                <div class="row">
                  <div class="col-md-4">
                    <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
                  </div>          
                  <div class="col-md-4">
                    <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
                  </div>
                  <div class="col-md-4">
                    <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
                  </div>      
                </div>
              </div>
            </div>
            <a data-slide="prev" href="#media" class="left carousel-control">‹</a>
            <a data-slide="next" href="#media" class="right carousel-control">›</a>
          </div>                          
        </div>
      </div>
    </div>

 /* carousel */
    .media-carousel 
    {
      margin-bottom: 0;
      padding: 0 40px 30px 40px;
      margin-top: 30px;
    }
    /* Previous button  */
    .media-carousel .carousel-control.left 
    {
      left: -12px;
      background-image: none;
      background: none repeat scroll 0 0 #222222;
      border: 4px solid #FFFFFF;
      border-radius: 23px 23px 23px 23px;
      height: 40px;
      width : 40px;
      margin-top: 30px
    }
    /* Next button  */
    .media-carousel .carousel-control.right 
    {
      right: -12px !important;
      background-image: none;
      background: none repeat scroll 0 0 #222222;
      border: 4px solid #FFFFFF;
      border-radius: 23px 23px 23px 23px;
      height: 40px;
      width : 40px;
      margin-top: 30px
    }
    /* Changes the position of the indicators */
    .media-carousel .carousel-indicators 
    {
      right: 50%;
      top: auto;
      bottom: 0px;
      margin-right: -19px;
    }
    /* Changes the colour of the indicators */
    .media-carousel .carousel-indicators li 
    {
      background: #c0c0c0;
    }
    .media-carousel .carousel-indicators .active 
    {
      background: #333333;
    }
    .media-carousel img
    {
      width: 250px;
      height: 100px
    }
    /* End carousel */

  $(document).ready(function() {
      $('#media').carousel({
        pause: true,
        interval: false,
      });
    });