Html 如何像砖石布局一样对齐引导网格？

我现在的网格设置如下所示：

第一组
第2组
第3组

非常简单：下面是使用Bootstrap4进行的演示。 网格必须包装在

容器中

，而

列

始终包装在

行中

div{
背景：天蓝色；
边框：1px纯蓝色；
}

第一组
第二辑小型
第3组
第2组

这个怎么样

<div class="row">
    <div class="col-sm-9">
        <div>
            div 1
        </div>
        <div class="visible-xs">
            div 2
        </div>
        <div>
            div 3
        </div>
    </div>
    <div class="col-sm-3 hidden-xs">
        div 2
    </div>
</div>

第一组
第2组
第3组
第2组

---

下面是一个JSFIDLE

要向下投票的问题有什么问题吗？我没有向下投票，但我猜是谁向下投票了你，因为你的代码与你当前的输出不匹配。你能把你的CSS添加到演示中吗？这只是一个网格布局的图示。我不是在寻找任何设计是的，但您给出的代码没有按照屏幕截图显示的方式布局网格。因此，我们给出的任何可能的答案都可能不起作用，因为它们可能与您所应用的使它们看起来像那样的代码冲突。因此，我们需要看到所谓的a能够提供帮助。如果缺少这样一个问题，许多用户会投反对票。出于@TylerH指定的原因进行否决投票。修复你的帖子，我将删除我的否决票。好吧，如果我在移动设备上查看，第2部分将位于第3部分下面。我不想那样。这是这里的主要问题。在这种情况下，您必须在1和3之间再添加一个俯冲，使其在小型设备上可见，在中型和大型设备上隐藏，反之亦然。利用显示工具感谢Manish。现在让我试试这一点，可能是因为我使用的是Bootstrap3和显示实用程序是用于bootstrap4Ok的，所以您可以为此编写媒体查询来实现。。。或者迁移到引导4。。。或者，您只能从引导程序4中获取实用程序并使用它们。。您使用的是什么构建系统。。你是在用css还是SCS？如果你要否决我，请解释为什么，我写的东西符合问题的要求。不过，我还是希望得到建设性的批评。