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

我有一个棘手的小问题，我没办法解决

请参阅以供参考

场景：我有两个引导顺序列：在大屏幕上，它们相邻两列，在小屏幕上，右侧的一列在左侧列的上方

<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定位，但它只是变得越来越黑。此外，我正试图使用尽可能多的默认引导样式，并尽可能少的定位黑客

这可能吗？

目标：

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

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

在bootstrap本身中，他们使用了{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'。当屏幕大小达到小屏幕时，它会隐藏右栏的内容，并在顶部显示导航栏内容

---

希望这会有用，谢谢。

问题：在JavaScript代码中，为什么要使用Math.max而不是Math.min？因此，您非常希望大屏幕上的固定位置右侧列保持在右侧，然后在小屏幕上，保持固定在黄色div的顶部？是的，我想这就是总结。