Responsive design 引导3分区水平列表

我有一个水平div的列表，我不能让它们按我所希望的那样工作。 我想要达到的是拥有

• 对于md、lg、sm-一个包含任意大小图像的小“缩略图”类图像的矩形div列表，并水平继续使用用户名-如md视图中的示例所示

• 对于xs，我希望每个条目都位于另一个条目的下方，名称位于图像的下方，这应该是屏幕大小

我不能举例说明这个图像，因为我已经使用了太多的内联css

---

除非我误解了你的问题，否则看起来你离你要找的东西很近。。。只需将您的

col-md-3

更改为

col-sm-3

，就可以在xs断点而不是sm断点处切换到垂直布局，如下所示：

约翰·史密斯

<div class="col-sm-3" style="margin-bottom:20px">
  <div class="col-md-12" style="border:1px solid #C0C0C0;background-color:white">
    <div class="col-md-4" style="background-color:black;height:60px">
  </div> 
  <div class="col-md-8">
   <strong>John Smith</strong>
  </div>
</div>