html - Twitter Bootstrap 列位置

Question

我有两列，我想在桌面上并排显示。

我想在桌面上按以下列顺序排列(第 2 列比第 1 列高):

[Column 1][Column 2]
[Column 3]

我想在移动设备上按以下列排序:

[Column 1]
[Column 2]
[Column 3]

这是我创建的示例:http://jsbin.com/folekajera/1/edit?html,css,output

示例的问题在于，在桌面 View 中，第 1 列和第 3 列之间存在间隙。

如何消除这个差距？

Answer 1

您在桌面 View 中出现间隙的原因是 Bootstrap 的网格有 12 列/行。所以前两个 div 占用了整行的宽度。第三列实际上在它自己的行中。 Nitin 的回答具有处理移动布局的正确方法。

因此，您实际拥有的有效 html 如下所示。

---

编辑 - 在您发表评论后，我重新考虑了我的答案。有一种方法可以做到。我已经修改了我的第一个答案中的 html。关键元素是下面的“右拉”类。详情见Column ordering .

<div id="second-col" class="col-xs-12 col-sm-4 pull-right">

我已经在 http://jsbin.com/rinejayojo/1/edit?html,css,output 更新了你的 jsbin 文件