css - Bootstrap 中的列流

Question

我正在尝试使表单更灵敏以处理较小的浏览器。目前，我们正在使用 bootstrap 来帮助布局，但我并不反对其他替代解决方案。在这个特定的 View 中，我们有两列，每列包含不同数量的数据。诀窍是右上角的组需要留在页面的顶部，无论我们是在一列还是两列中呈现它。右上部分下方的组应排在左侧列中的任何组下方。这是我们正在努力实现的目标的说明:

2 列:

 L1   R1
 L2   R2
 L3

1 列:

R1
L1
L2
L3
R2

使用 Bootstrap，我可以使用 col-pull/col-push 让 R1 保持在顶部，但是在左侧列的所有值都呈现后，R1 下的右侧列值会流动，从而导致:

 L1   R1
 L2   
 L3
      R2

这是我迄今为止尝试过的标记。我还在 http://jsfiddle.net/jimwooley/g8r35/ 为那些需要现场样本的人发布了一个 jsfiddle。 .

<div class="row row-fluid">
    <div class="col-sm-7 col-sm-push-5 col-xs-12">R1</div>
    <div class="col-sm-5 col-sm-pull-7 col-xs-12">L1<br />
         L2<br />
         L3</div>
    <div class="col-sm-5 col-sm-push-5 col-xs-12">R2<br />
         R3</div>
</div>

注意:各部分的高度各不相同，所以我不能只在二号线的正下方或二号线的旁边流动，因为它们可能落在两者之间的中间。另外，我不能在此处使用列，因为结果需要与 IE8 兼容。

Answer 1

让它们成为第 6 列而不是第 12 列？由于 bootstrap 在页面上查找 12？因此调用 6 或 3 应该显示单列。 (在此示例中为平板电脑或手机)。全屏显示 2 列。

我可能误解了这个问题。