Bootstrap侧边栏未按预期折叠

Question

这个问题是我之前问的一个问题，但是是一个单独的问题：Left sidebar with toggle in Bootstrap 3 not working

jsfiddle在这里：https://jsfiddle.net/y9khea25/1/

我已经实现了答案（在本地副本上），该答案整理了汉堡菜单的位置以打开/关闭左侧边栏。

但是，当我将浏览器窗口的大小调整为媒体查询(max-width:767px)中的断点时，我得到以下信息：

之所以使用媒体查询，是因为左侧边栏应该在断点处折叠：

    @media (max-width:767px) {
        main {
            padding-left: 70px;
            transition: all .4s ease 0s;
        }
        #sidebar {
            left: 70px;
        }
        main.active {
            padding-left: 150px;
        }
        main.active #sidebar {
            left: 150px;
            width: 150px;
            transition: all .4s ease 0s;
        }
    }

我不知道该问题是否是由于我正在<main>，左侧边栏中的.col-sm-3 .col-md-2和.col-xs-12 .col-sm-9 .col-md-10中使用以下Bootstrap类而导致的内容。但是，这是必需的，因为我希望侧边栏和内容的那些列比例。我不知道是否正在使用它们，因为#sidebar在CSS中的固定宽度为150px。

请记住我，这可以帮助别人吗？

小提琴上显示的效果是正确的，除了在断点处，我希望左侧边栏处于“折叠”位置，并能够使用汉堡菜单（#menu-toggle）重新打开。