Javascript 使用bootstrap粘贴跳转列

我有两个引导列，它们在大屏幕上彼此相邻，在小屏幕上彼此堆叠。它是有意设置的，因此在较小的屏幕上，右侧的列堆叠在左侧列的顶部

问题：在大屏幕上滚动时，列正确地固定在y轴上，但左侧和右侧列都跳出到两侧并改变宽度

查看js提琴，向下滚动，您将看到问题所在

HTML

<div class="col-md-3 col-md-push-9" id="right">
    Right in wide screens, top on small screens
</div>
<div class="col-md-9 col-md-pull-3" id="left">
    Left column with a lot of stuff
</div>

---

我想我可以用css解决这个问题，但我的努力都没有解决它。感谢您的建议。

这不是一个完整的答案，但如果您进行以下更改，您将看到不同之处：

<div class="col-md-3 col-md-push-9">
    <div id="right">
        Right in wide screens, top on small screens
    </div>
</div>

在宽屏幕上右键，在小屏幕上右键

词缀仍然会改变宽度，因为它有一个固定的位置。有关更多详细信息，请参阅和

然后还有一些丑陋的填充差异：在一个狭窄的页面上，上面的块比下面的块宽度小。这可能很容易解决

<div class="col-md-3 col-md-push-9">
    <div id="right">
        Right in wide screens, top on small screens
    </div>
</div>