Bootstrap 3 复杂的列布局答案

【问题标题】：Bootstrap 3 Complex Column LayoutBootstrap 3 复杂的列布局
【发布时间】：2018-08-01 20:16:34
【问题描述】：

我正在尝试确定这种布局是否可以在 bootstrap 3 中实现。

bootstrap 3 网格布局：

有几个问题我看不出是否有解决办法，主要是红色框中的项目需要在较小的屏幕上折叠在一起。而且我不能将它们设置为 col-10/col-2，因为 col-10 有 5 列行。

这是不可能的，还是有一些我没有看到的解决方法？

【问题讨论】：

到目前为止你尝试了什么？
你说的“合二为一”是什么意思？
请通过编辑将minimal reproducible example 添加到您的问题中。此外，您可以阅读我们的How to Ask 页面，了解如何改进此问题的提示。更好的问题往往会从社区中获得更快、更好的答案。
@ochi 最后一个红框需要排在第一个红框中的所有内容之后。即我将无法执行行 col-sm-10、col-sm-2 和行 col-sm-2 x5，因为它无法在移动设备上正确显示。较细的行是下面的标题。我最终获得了废弃最后一列的许可，因此以这种方式解决了这个问题。

【解决方案1】：

使用普通的 Bootstrap 3 类是不可能的，因为 12 单元的网格系统不能被 5 列整除。充其量，您可以使用.col-md-offset-1 偏移第一列，这会在五列周围添加半列空格。

我建议尝试Bootstrap 4 grid system！它基于 flexbox，可以处理 5 列。

【讨论】：