bootstrap网格：如何实现这种马赛克结果？

Question

使用bootstrap的网格，我想实现连接图像的结果，除了第一个框具有lg和sm两倍于其他框的宽度。

使用3 col-md-4 col-sm-6 col-xs-12可以轻松复制图像的网格，但这不允许我将第一个div设置为宽度的两倍。

我怎样才能做到这一点？非常感谢！

精度：我需要第一个框下面的剩余空间，其宽度为双倍，无论其高度

编辑：我使用多个col-xx-XX几乎有一个好结果，但我也有双填充。 如果我完全删除双填充，我可以有一些加入div。如果我只为这些2保持左右填充，我在xs视图中得到一个额外的填充

Answer 1

您可以尝试这样的事情：

  <div class="container">
<div class="row">
  <div class="col-md-4">
    <div class="col-md-12 col-sm-6 col-xs-12" style="background-color:red; height: 200px; margin: 15px;"></div>
    <div class="col-md-12 col-sm-6 col-xs-12" style="background-color:blue; height: 400px; margin: 15px;"></div>
  </div>
  <div class="col-md-4">
    <div class="col-md-12 col-sm-6 col-xs-12" style="background-color:yellow; height: 300px; margin: 15px;"></div>
    <div class="col-md-12 col-sm-6 col-xs-12" style="background-color:black; height: 300px; margin: 15px;"></div>
  </div>
  <div class="col-md-4">
    <div class="col-md-12 col-sm-6 col-xs-12" style="background-color:grey; height: 200px; margin: 15px;"></div>
    <div class="col-md-12 col-sm-6 col-xs-12" style="background-color:green; height: 400px; margin: 15px;"></div>
  </div>
</div>

希望这能回答你的问题。 https://jsfiddle.net/87LyrLcj/1/