无法在移动视图中将div显示为侧边栏

Question

如何在移动视图中将以下div显示为侧栏。

因为我有navbar，我如何才能将这个div像切换一样显示为侧边栏，因此该div应该仅在移动视图上才是侧边栏，我正在使用bootstrap 3.3.7

是否有一种方法可以使该div仅在移动视图中作为侧边栏

<div id="column-left" class="col-sm-3 col-xs-12 ">
                        <div class="list-group rowd">
                            <h2>Categories</h2>
                            <a class="ads" href="all_ads.php">View all Ads</a>
                            <ul class="list-unstyled">
                                <li>
                                    <select class="selectpicker form-control bs-select-hidden" name="location" onchange="location = this.value;">
                                        <option value="vehicle_category.php">Vehicle</option>
                                        <option value="mobile_category.php">Mobiles</option>
                                        <option value="electonics_category.php">Electronics</option>
                                        <option value="real_estate_category.php">Real Estate</option>
                                        <option value="fashion_category.php">Fashion</option>
                                        <option value="furniture_category.php">Furniture</option>
                                        <option value="jobs_category.php">Jobs</option>
                                        <option value="services_category.php">Services</option>
                                        <option value="pets_category.php">Pets</option>
                                        <option value="education_category.php">Education</option>
                                        <option value="matrimony_category.php">Matrimony</option>
                                        <option value="note_coins_category.php">Note and Coins</option>
                                    </select><div class="btn-group bootstrap-select form-control"><button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" title="Vehicle"><span class="filter-option pull-left">Vehicle</span>&nbsp;<span class="caret"></span></button><div class="dropdown-menu open"><ul class="dropdown-menu inner" role="menu"><li data-original-index="0" class="selected"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">Vehicle</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="1"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">Mobiles</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="2"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">Electronics</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="3"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">Real Estate</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="4"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">Fashion</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="5"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">Furniture</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="6"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">Jobs</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="7"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">Services</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="8"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">Pets</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="9"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">Education</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="10"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">Matrimony</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="11"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">Note and Coins</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li></ul></div></div>
                                </li>
                                <li><a href="#" class="list-group-item"><i class="fa fa-car"></i>Cars</a></li>
                                <li><a href="#" class="list-group-item"><i class="fa fa-bus"></i>Bus, Van, Truck</a></li>
                                <li><a href="#" class="list-group-item"><i class="fa fa-truck"></i>Industrial Vehicle</a></li>
                                <li><a href="#" class="list-group-item"><i class="fa fa-motorcycle"></i>Motorcycles</a></li>
                                <li><a href="#" class="list-group-item"><i class="fa fa-bicycle"></i>Bicycles</a></li>
                                <li><a href="#" class="list-group-item"><i class="fa fa-magic"></i>Spare Parts</a></li>
                            </ul>
                        </div>
                    </div>