JQuery和Bootstrap拉函数冲突

Question

我正在建立一个静态网站。向下滚动时，会触发一个JQuery事件侦听器，并且div会从屏幕右侧滑动到焦点。一切正常......除了事件完成后的引导样式。 div中有两个小节。我想将该部分从右向左拉（出于移动调整的原因），反之亦然。推动部分像它应该的那样向右移动，但我想要的左侧部分，拉动部分，拒绝移动。它保持在右侧，忽略了Bootstrap拉式造型。这是个问题。我不知道该怎么做。有人可以帮忙吗？

以下是相关部分：

<div class="row section_3">
   <div class="col-sm-4 col-sm-push-6">
        <%= image_tag 'pencil.jpg', class: 'picture left' %>
   </div>
   <div class="col-sm-4 col-sm-pull-5 col-xs-10 col-xs-push-1">
        <h2 class="darkgrey left">Did you know?</h2>
        <h4 class="content grey left">Due to an extreme lack of funding, many public schools have had to cut entire subjects from their ciriculum to make ends meet. Even after eliminating music and physical education programs, educators often have personally purchase basic classroom supplies to ensure their students have the tools they need.</h4>
        <div class="button-donate left">Learn More</div>
   </div>
</div>

这是我的JQuery幻灯片事件：

function left() {
    pos = window.pageYOffset; 
    if (pos > 700) {
        $('.left').animate({left: '0px'}, 1200);
    }
}
window.addEventListener('scroll', left);

这是CSS：

.left {
position: relative;
left: 6000px;
}

以下是该问题的图片。

帮助！ （感谢）