引导程序缩略图库-将col-md-3从一个位置移动到另一个位置

Question

我有一个具有容器类的div，并且在该div中，我有4个cols

<div class="container">
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
</div>

和左右两个独立的箭头

在图像中没有显示最右边的div，但是当我按向左按钮时，我希望所有div都向左移动一项（最右边的div被删除），而当我按向右按钮时，我想所有div都会向右移动一个点，但最右边的div会显示为右侧的第一个div。可能会超过4格。

可以使用css和或jquery

我有这段代码可以将3个列一起移动

        <div class="container">

            <div id="imageCarousel" class="carousel slide" data-ride="carousel">
              <ol class="carousel-indicators">
                <li data-target="#imageCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#imageCarousel" data-slide-to="1"></li>
                <li data-target="#imageCarousel" data-slide-to="2"></li>
              </ol>
             <div class="carousel-inner">
               <div class="item active">
                 <div class="row">
                   <div class="col-md-4">
                     <img src="https://1.bp.blogspot.com/-E8GdZQshD7I/WI1-yGMXseI/AAAAAAAACfs/ZndWplkyLpgVPO5IQ294pjxr9rq8YtqcwCLcB/s640/boot1.png" class="img-responsive" />
                   </div>
                   <div class="col-md-4">
                     <img src="https://2.bp.blogspot.com/-hmUAa7DH5N4/WI2KJqMdhrI/AAAAAAAACf8/huv-RB55G_QpCI-9G-iA0JrS1pqCswEogCLcB/s640/boot2.png" class="img-responsive" />
                   </div>
                   <div class="col-md-4">
                     <img src="https://2.bp.blogspot.com/-ZWboxYj_gz0/WInKMMQA_HI/AAAAAAAACe4/4ihHdvifuKYJNQElLULtivsCne9ZDbM3ACLcB/s640/di.png" class="img-responsive" />
                   </div>
                 </div>
               </div>
               <div class="item">
                 <div class="row">
                   <div class="col-md-4">
                     <img src="https://2.bp.blogspot.com/-hmUAa7DH5N4/WI2KJqMdhrI/AAAAAAAACf8/huv-RB55G_QpCI-9G-iA0JrS1pqCswEogCLcB/s640/boot2.png" class="img-responsive" />
                   </div>
                   <div class="col-md-4">
                     <img src="https://2.bp.blogspot.com/-ZWboxYj_gz0/WInKMMQA_HI/AAAAAAAACe4/4ihHdvifuKYJNQElLULtivsCne9ZDbM3ACLcB/s640/di.png" class="img-responsive" />
                   </div>
                   <div class="col-md-4">
                     <img src="https://1.bp.blogspot.com/-E8GdZQshD7I/WI1-yGMXseI/AAAAAAAACfs/ZndWplkyLpgVPO5IQ294pjxr9rq8YtqcwCLcB/s640/boot1.png" class="img-responsive" />
                   </div>
                 </div>
               </div>
               <div class="item">
                 <div class="row">
                   <div class="col-md-4">
                     <img src="https://1.bp.blogspot.com/-E8GdZQshD7I/WI1-yGMXseI/AAAAAAAACfs/ZndWplkyLpgVPO5IQ294pjxr9rq8YtqcwCLcB/s640/boot2.png" class="img-responsive" />
                   </div>
                   <div class="col-md-4">
                     <img src="https://1.bp.blogspot.com/-E8GdZQshD7I/WI1-yGMXseI/AAAAAAAACfs/ZndWplkyLpgVPO5IQ294pjxr9rq8YtqcwCLcB/s640/boot1.png" class="img-responsive" />
                   </div>
                   <div class="col-md-4">
                     <img src="https://2.bp.blogspot.com/-ZWboxYj_gz0/WInKMMQA_HI/AAAAAAAACe4/4ihHdvifuKYJNQElLULtivsCne9ZDbM3ACLcB/s640/di.png" class="img-responsive" />
                   </div>
                 </div>
               </div>
              </div>
              <a class="left carousel-control" href="#imageCarousel" role="button" data-slide="prev">
                  <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                  <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#imageCarousel" role="button" data-slide="next">
                  <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                  <span class="sr-only">Next</span>
                </a>
             </div>

        </div>

谢谢