Html 引导程序3：如何在较大的视口中使较低的列（默认xs/mobile布局）位于较高的位置

我的问题是我的非移动布局。我有四个专栏。以下是他们的订单（宽度为sm/md/lg）：

B列是一个大的、可变高度的列。所以A列总是比B列短。当视口展开时，我的问题是我不能让D坐在A下面，即使它们都是3宽的列，并且A下面有空的/未填充的空间

我想要的是：

BBB A
BBB D
BBB
CCC

我现在所拥有的：

BBB A
BBB
BBB
CCC D

无论我用推/拉、嵌套等方法尝试什么，D都不会跳到A下面的空间

以下是我的代码，简单到基本：

（A） 右对齐，3宽div，非常短

（B） 左对齐的大可变高度内容分区。
（B）
（B）
（C） 左对齐的较小内容div
（C）
（C）
（D） 右对齐的3宽div，我想在第一个3宽div下面
（D）
（D）
（D）
（D）
（D）

提到的间隙是浮动工作方式的结果。常见的解决方案是。换句话说，你不能用css来修复它，而是用javascript。希望这能有所帮助。

如果您恰好需要4列，可以使用此解决方案：

将

B

和

C

块包装到附加块中

当屏幕宽度变为786px或更大时，对块

A

应用

float:right

属性。为此，我定义了一个新的特殊类

请检查结果：

@介质（最小宽度：768px）{
.向右拉sm{
浮子：对！很重要；
}
}
/*装饰物*/
#A、 #B、#C、#D{
字体大小：24px；
字体大小：粗体；
颜色：#fff；
填充顶部：6px；
}
#A{背景：#c69；最小高度：50px；}
#{背景：9c6；最小高度：150px；}
#{背景：#69c；最小高度：100px；}
#D{背景：#ff0；最小高度：250px；}

A.
B
C
D

我希望您能解释为什么这个答案是否定的，不是我的声音。我想，一个可能的原因是CSS可以解决这个问题。如果您能分享我的答案被降级的原因，我将不胜感激。我不会推荐这种解决方案。有两个原因：a）此解决方案引入了15列网格（3+9+3），而Botstrap是针对12列网格编写的（并经过测试）。对于使用框架的开发人员来说，以文档中建议的方式使用框架是多么重要，我怎么强调都不过分。这不是我的僵化，我只是浪费了很多时间来调试这样的黑客。b） 这个解决方案并没有解决用户Peter Simones正在处理的主要问题：这是由具有float:left/right的元素引起的间隙。有关更多详细信息，请搜索“浮动垂直间隙问题”@Danko感谢您的反馈。我使用了标准的12列网格。所有这些特性都在引导文档中描述。我的

.pull sm float

类是基于Bootstrap的。@GlebKemarsky如果我能投票10次，我会的。非常感谢。这让我很开心。（解决方案非常有效。）@PeterSimones很高兴能提供帮助：）欢迎使用SO！

BBB A
BBB
BBB
CCC D