Html 具有引导功能的响应性产品列表

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

hope图像用于桌面，下部用于移动设备

我试着用一张桌子让它工作，但我不能把我的头绕在它周围有人告诉我这可能会有帮助。我宁愿使用bootstrap来实现这一点，但我不明白让不同Div按我希望的方式移动和堆叠的最佳方法。如果有人能帮上忙，那就太棒了

提前感谢。

试试这个：

<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>

---

你太棒了，我也知道你现在做了什么，你根据屏幕大小创建了Div，并根据屏幕大小隐藏了最后一个Div 4？非常感谢，是的。在本例中，我认为唯一的方法是打印div 4两次，在第一种情况下，使其仅对移动设备可见，在第二种情况下，使其对移动设备隐藏，对其他尺寸可见。