使有序引导列浮动在屏幕顶部

Question

我有一个棘手的小问题，我无法解决。

请参考http://jsfiddle.net/KKczd/。

场景：我有两个引导排序的列：在大屏幕上，它们彼此相邻，在较小的屏幕上，右侧的一个在左列上方流动。

<div class="row">
    <h1>Header section</h1>
</div>
<div class="row">
    <div class="col-md-3 col-md-push-9" id="right">...</div>
    <div class="col-md-9 col-md-pull-3" id="left">...</div>
</div>

这种基本布局和功能完美运行。

目标： 对于大屏幕，当页面向下滚动时，我希望右栏始终保持在页面顶部。对于小屏幕，我希望右列（现在是第一行）保持在顶部，随着内容向上滚动，内容在其下方滚动。

问题： 我编写了一些 javascript，它们似乎只会使右列越来越低 - 它对较小屏幕宽度的部分没有影响 - 除了一些神奇的消失。

我玩过偏移量和重置偏移量，我也尝试过使用一些 css 定位，但它变得越来越老套。此外，我尝试使用尽可能多的默认引导样式，并尽可能少地使用定位技巧。

这有可能吗？

Answer 1

目标：

{1}[对于大屏幕，当页面向下滚动时，我希望右栏始终保持在页面顶部]。

{2}[对于小屏幕，我希望右列（现在是第一行）保持在顶部，内容在其下方随着内容向上滚动而滚动。]

在引导程序website 本身中，他们使用了{1}所需的概念，将 class= 'affix' 用于右列，

对于 {2} ，我有一个想法，在屏幕顶部创建一个导航栏并设置 class= 'navbar-default navbar-fixed-top visible-xs visible-sm hidden-lg hidden-md ' 并在该导航栏中给出相同的右列内容，在右列中使用 class= 'visible-lg visible-md hidden-sm hidden-xs'。当屏幕尺寸达到小屏时，隐藏右栏内容，并在顶部显示导航栏内容。

希望对你有用，谢谢。