折叠内容中的某些内容的Bootstrap边栏

Question

在Bootstrap网站上使用dashboard example，我尝试将其改编为我的项目（ui用于Wordpress插件）。首先，我删除了导航栏并将代码更改为：

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
            <ul class="nav nav-sidebar">
                <li class="active"><a href="#">Overview <span class="sr-only">(current)</span></a></li>
                <li><a href="">Reports</a></li>
                <li><a href="#">Analytics</a></li>
                <li><a href="#">Export</a></li>
            </ul>
            <ul class="nav nav-sidebar">
                <li><a href="">Nav item</a></li>
                <li><a href="">Nav item again</a></li>
                <li><a href="">One more nav</a></li>
                <li><a href="">Another nav item</a></li>
                <li><a href="">More navigation</a></li>
            </ul>
            <ul class="nav nav-sidebar">
                <li><a href="">Nav item again</a></li>
                <li><a href="">One more nav</a></li>
                <li><a href="">Another nav item</a></li>
            </ul>
        </div>

        <div class="col-sm-9 offset-sm-3 col-md-10 offset-md-2 main">
              <h2>Header</h2>
                 <!-- content goes on -->
        </div>
     </div>
<div>

这是一个小提琴：https://jsfiddle.net/DTcHh/24816/

而不是引导程序示例，在小型设备上，我希望侧边栏项目折叠并创建折叠图标，就像对导航栏项目一样。我不希望它在任何导航栏中折叠，我希望它将其创建为新元素这样的事情：