使用Bootstrap的响应式产品列表

Question

我正在尝试为我正在制作的测试学习者网站的产品列表部分创建以下内容。

希望图片适用于桌面，而较低版本适用于移动设备。

我试图用一张桌子让它工作但是我无法绕过它（有人告诉我它可能有帮助）。我宁愿使用bootstrap让它工作，但我无法理解让不同的Div移动和叠加我想要的方式的最佳方法。如果有人能提供帮助那就太棒了！

提前致谢。

Answer 1

试试这个：

<div class="row">
  <div class="col-xs-4 col-sm-3">Div 1</div>
  <div class="col-xs-6 col-sm-3">
     <div class="row">
       <div class="col-xs-12">Div 2</div>
     </div>
     <div class="row">
       <div class="col-xs-6 col-sm-12">Div 3</div>
       <div class="col-xs-6 visible-xs">Div 4</div> 
     </div>
  </div>
  <div class="col-sm-3 hidden-xs">Div 4</div>
</div>