Javascript 在引导网格中围绕大div包装div

我需要一些复杂的CSS布局问题的帮助。如果它可以用CSS而不是javascript来完成，那将是理想的

我需要一个不同高度的产品网格 还有一款特色产品，其高度是普通产品的2倍 不同视口上的布局需要与下面的图像匹配 到目前为止，我所尝试的：

下面是我现在拥有的代码示例：

<div class="container">
<div class="row">
  <div class="l-product large col-xs-6 col-sm-6 col5-md-2 ">
    1
    <br>This div should be double the height of one tile without fixing the height with CSS
  </div>
  <div class="l-product taller col-xs-6 col-sm-3 col5-md-1">
    2
    <br><span>If one div is taller the whole grid breaks</span>
  </div>
  <div class="l-product col-xs-6 col-sm-3 col5-md-1">
    3
  </div>
  <div class="l-product col-xs-6 col-sm-3 col5-md-1">
    4
  </div>
  <div class="l-product col-xs-6 col-sm-3 col5-md-1">
    5
  </div>
  <div class="l-product col-xs-6 col-sm-3 col5-md-1">
    6
  </div>
  <div class="l-product col-xs-6 col-sm-3 col5-md-1">
    7
  </div>
  <div class="l-product col-xs-6 col-sm-3 col5-md-1">
    8
  </div>
  <div class="l-product col-xs-6 col-sm-3 col5-md-1">
    9
  </div>
  <div class="l-product col-xs-6 col-sm-3 col5-md-1">
    10
  </div>
  <div class="l-product col-xs-6 col-sm-3 col5-md-1">
    11
  </div>
</div>

我正在使用引导，所以我尝试像这样嵌套行。我的问题是，我不知道如何使项目在不同的视口中从一行移动到另一行，这导致网格中断 桌面：

平板电脑：

小型平板电脑：

流动电话：

---

我不确定你能用基本的引导程序做到这一点。我建议使用更先进的技术，如。转到示例链接时，请更改浏览器宽度。它还添加了一些不错的动画效果

//外部js:mashine.pkgd.js $document.readyfunction{ $'.grid'。砌体{ itemSelector:“.grid项”， 列宽：130 }; }; * { -webkit框大小：边框框； 框大小：边框框； } 正文{字体系列：无衬线；} /*-网格-*/ .电网{ 背景：EEE； } /*clearfix*/ .网格：之后{ 内容：； 显示：块； 明确：两者皆有； } /*-网格项-*/ .表格项目{ 宽度：120px； 高度：120px； 浮动：左； 背景：D26； 边框：2个实心333； 边框颜色：hsla0,0%，0%，0.5； 边界半径：5px； 保证金：5px； } .grid-item-width2{width:250px；} .grid-item-height2{高度：250px；} 砌体柱宽度

---

如果使用列，则需要将列除以12。所以我们想要一个偶数，5不分解成12列

试着在下面看看结果。我在较小的盒子上增加了6个盒子

<div class="container">
        <div class="row">
            <div class="col-xs-6">
                <div class="big-box">image</div>
            </div>
            <div class="col-xs-6">
                <div class="row">
                    <div class="col-xs-4"><div class="mini-box">1</div></div>
                    <div class="col-xs-4"><div class="mini-box">2</div></div>
                    <div class="col-xs-4"><div class="mini-box">3</div></div>

                </div>
                <div class="row">
                    <div class="col-xs-4"><div class="mini-box">1</div></div>
                    <div class="col-xs-4"><div class="mini-box">2</div></div>
                    <div class="col-xs-4"><div class="mini-box">3</div></div>

                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-2"><div class="mini-box">1</div></div>
            <div class="col-xs-2"><div class="mini-box">2</div></div>
            <div class="col-xs-2"><div class="mini-box">3</div></div>
            <div class="col-xs-2"><div class="mini-box">4</div></div>
            <div class="col-xs-2"><div class="mini-box">5</div></div>
            <div class="col-xs-2"><div class="mini-box">6</div></div>

            </div>
        <div class="row">
            <div class="col-xs-2"><div class="mini-box">1</div></div>
            <div class="col-xs-2"><div class="mini-box">2</div></div>
            <div class="col-xs-2"><div class="mini-box">3</div></div>
            <div class="col-xs-2"><div class="mini-box">4</div></div>
            <div class="col-xs-2"><div class="mini-box">5</div></div>
            <div class="col-xs-2"><div class="mini-box">6</div></div>

        </div>
        </div>

这是一个

---

或者你可以使用网格系统和jQuery

请显示一些代码。您好，我很乐意提供帮助，我喜欢bootstrap。请在每张图像中的每个框上放置一个数字，这样我就知道每个视口中哪个框对应哪个框。@MichaelJones我在框上添加了数字，这样你就可以看到我在做什么。@l19我添加了一些codeHello@Rich，这对较小的屏幕尺寸不起作用。我如何解决不同高度div的问题。我不是在固定高度，它们是动态的。你可以使用砖石布局。使用jQuery。这是一个很好的插件。我以前研究过这个问题，我的问题是，我需要一行中的所有div都具有相同的高度，内容是动态的，而大图像的高度是该高度的两倍，也是动态的，所以所有内容都要对齐。除非我弄错了，否则砖石建筑似乎没有解决办法。从我看来，你想要什么就做什么。它甚至会根据宽度断点更改第一个div的大小。有什么问题吗？另外，您说内容是动态的，但它们的高度必须相同。这到底是怎么回事？如何计算高度？