Jquery 更改Wordpress侧边栏中使用Bootstrap 3构建的垂直菜单的堆叠顺序

几天来，我一直在努力解决这个问题，现在我正在尝试各种在线解决方案，但都没有效果。我正在尝试用WordPress创建我的第一个Bootstrap3站点。我想创建一个垂直菜单，应该是响应。我能想到的唯一办法就是把它放在边栏里？它工作正常，当然，如果窗口调整菜单跳到底部，我需要它跳到顶部。我在当地工作，所以我没有帖子的链接，但我希望有人能给我一些建议

这是根据教程假定可以工作的脚本：

<script type="text/javascript">
(function($) {
    var $window = $(window),
        $html = $('#menu-bar');

    $window.resize(function resize() {
        if ($window.width() < 768) {
           return $html.removeClass('nav-stacked');
        }
        $html.addClass('nav-stacked');
    }).trigger('resize');
})(jQuery);
</script>

（函数（$）{
变量$window=$（window），
$html=$（“#菜单栏”）；
$window.resize（函数resize（）{
如果（$window.width（）<768）{
返回$html.removeClass（'nav-stacked'）；
}
$html.addClass（'nav-stacked'）；
}).trigger（'resize'）；
})（jQuery）；

更新：

---

我更接近于一个解决方案。它与下面的脚本一起工作，但当我将窗口重新调整为全宽时，菜单显示为全宽菜单，将页面上的所有内容向下推

这可能是CSS问题吗

$(window).resize(function(){ 
    if ($(window).width() <= 768){ 
        $(document).ready(function() { 
            $('#sidebar-nav').insertAfter('#myJumbotron'); 
        }); 
    } 
});

$（窗口）。调整大小（函数（）{
if（$（window）.width（）我更接近于一个解决方案。它与下面的脚本一起工作，除非我将窗口重新调整为全宽，菜单显示为全宽菜单，将页面上的所有内容向下推。这可能是CSS问题吗？我现在有一个指向测试站点的链接：$（window）.resize（function（）{if（$（window）.width（）有没有人可以看看这个。我还没有找到解决方案。当屏幕调整大小时，或者我将平板电脑从纵向改为横向时，导航菜单会在屏幕上延伸，而不是跳转到侧边栏。谢谢！未来用户的解决方案：$（function（）{//初始大小调整resizeMe（）；//调整大小的窗口！$（窗口）.on（“resize”，function（）{resizeMe（）；}）；}）；function resizeMe（）{if（$（窗口）.width（）
 $(function(){
 // initial size adjustments
  resizeMe();
 // Resized window!
  $(window).on("resize",function(){
    resizeMe();
   });
 });

 function resizeMe(){
  if ($(window).width() <= 768){  
   $('#sidebar-nav').insertAfter('#myJumbotron');
 }else{
   $("#sidebarBG").prepend($("#sidebar-nav"));
  }
 };