移动的Bootstrap缩略图旋转木马

Question

我正在使用本教程的Bootstrap水平旋转木马，缩略图在幻灯片上显示4。 http://bootsnipp.com/snippets/featured/simple-carousel

我想为移动设备显示更少的商品。我可以让它连续显示1，但然后它垂直堆叠。我希望它们像在大屏幕上一样水平滚动。我怎么能这样做？

每张幻灯片都设置如下：

<div class="item active">
                <div class="row">
                  <div class="col-md-3"><a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
                  <div class="col-md-3"><a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
                  <div class="col-md-3"><a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
                  <div class="col-md-3"><a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
                </div><!--.row-->
            </div><!--.item-->

我已经看到了关于隐藏特定移动设备（https://stackoverflow.com/a/17662129/4597784）的答案，但这对我不起作用，因为图像将从数据库中提取并且我想显示所有图像，而不仅仅是每张幻灯片上的第一张。