我想将小屏幕（sm和xs）中的左侧边栏转到汉堡包图标。
我研究了许多解决方案，但是在lg和md屏幕上找不到能使边栏样式保持完整的任何东西。
在mozilla firefox 浏览器响应式测试中，ipad一直按照我的期望工作。
但是我想在小屏幕上查看汉堡包的侧边栏，并且汉堡包图标仅应在小屏幕上可见，而其他样式保持不变。在汉堡上点击Expected sidebar in mobile屏幕
对于侧边栏-我希望小屏幕中的侧边栏在slide和sm中从从左向右 xs。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF=8">
<meta name="viewport", content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie-edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div class="row">
<div class="col-md-3 pl-5 d-none d-md-inline">
<ul class="list-group shadow bg-white rounded sticky-top">
<li class="list-group-item rounded">1 Lorem ipsum dolor sit amet consectetur</li>
<li class="list-group-item rounded">2 Lorem ipsum dolor sit amet consectetur</li>
<li class="list-group-item rounded">3 Lorem ipsum dolor sit amet consectetur</li>
<li class="list-group-item rounded">4 Lorem ipsum dolor sit amet consectetur</li>
<a href="#" class="list-group-item list-group-item-action">PHP Switch Statement</a>
<a href="#" class="list-group-item list-group-item-action">PHP If-Else Statement</a>
</ul>
</div>
<div class="col-md-6">
<div class="card shadow bg-white rounded">
<div class="card-body">
<h2>TITLE HEADING</h2>
<h5>Title description, Dec 7, 2017</h5>
<div class="row jistify-content-center">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quia animi incidunt numquam porro fuga quibusdam sunt iste nihil et perferendis molestiae labore, accusantium neque corrupti ab quis vel. Laudantium voluptate, eius doloremque quia neque enim odit provident assumenda. Esse ipsum aut quas impedit. Voluptatum minus debitis iure at, voluptatem mollitia ullam optio ipsum. Provident nobis animi delectus sit porro asperiores, culpa deleniti, omnis obcaecati minima est voluptatem ipsum laboriosam quidem. Nisi officiis mollitia vitae voluptatum, maiores voluptates numquam earum, reprehenderit quis facilis dolor molestias illum id minus quaerat doloribus molestiae? Vero voluptatem ad libero facere ut odio in laborum ducimus nam, placeat provident nemo aspernatur maxime! Est magni, veniam quod illo eos totam officiis impedit temporibus voluptatum, dolores pariatur nostrum enim accusantium nam ut ab esse! Tempore nihil velit dolores necessitatibus dicta quaerat perspiciatis autem, vero alias dolorem nulla maiores odio animi accusamus, repellendus assumenda nemo dolore blanditiis architecto. Sint mollitia, eligendi sequi cupiditate perferendis animi dicta similique, veritatis ad quos nihil doloremque suscipit voluptatum eius dolor at dolores esse. Perspiciatis nam ab perferendis. Odio id itaque fugit blanditiis reiciendis amet quisquam delectus ex odit, repudiandae nisi sunt esse reprehenderit error vitae libero! Iusto in voluptate repellendus voluptates earum ipsam iure quia soluta aut qui sint excepturi eligendi deleniti, neque hic perspiciatis natus fugit ab reprehenderit! Aspernatur obcaecati reprehenderit quis corporis est natus saepe quas ipsum, magnam repellendus cumque iste eum minus assumenda dolores ab tenetur praesentium id inventore. Dolorem eligendi, nulla, alias autem id libero fugiat blanditiis aliquam, vel perferendis placeat veniam nisi. Assumenda voluptates a quo nam numquam ipsam dolorem deleniti commodi voluptate atque adipisci recusandae nostrum distinctio quisquam voluptas, omnis aspernatur iste dolorum officiis error quas ratione optio! Officia adipisci deserunt rem corporis dolorem. Odio, nulla libero architecto facilis similique omnis est nobis. Quam nemo quisquam dolor incidunt facere distinctio quos consectetur, magni eveniet. Tempore deleniti ducimus perferendis quos illum molestias excepturi, nobis repellendus quam, optio iure necessitatibus dolore vitae repellat nemo aperiam quisquam consequatur maiores. At ex, blanditiis, pariatur atque enim, distinctio ut necessitatibus quae quia corporis itaque natus consequuntur numquam molestiae? Quas fugiat reiciendis, officia distinctio ipsam corrupti eum, mollitia nemo veniam iste impedit tenetur asperiores ullam porro corporis ut quo fuga laudantium aut saepe eveniet iusto nam! Corporis quia at rerum, itaque fuga consequatur quod vel modi. Itaque reprehenderit voluptates nihil! Amet repellendus, cum nemo nesciunt at dolore eveniet est magnam totam eligendi recusandae eius consequuntur necessitatibus rem corporis laudantium tempore iusto, accusamus aut incidunt laboriosam? Totam eligendi porro tempora exercitationem laboriosam et incidunt obcaecati consequatur? Earum qui nulla esse repudiandae facilis! Culpa voluptas ipsa, reprehenderit veritatis unde vitae quis obcaecati. Iusto, facilis. Possimus accusamus perferendis vel facilis optio? Ipsam aut facere voluptate iure accusantium accusamus quis quasi, modi dolorem, dicta aliquid velit dolorum rerum delectus corporis facilis. Cum perspiciatis corporis, hic esse at officia fugit odio reprehenderit quasi mollitia omnis sint nam voluptas sunt ab adipisci saepe. Consectetur ullam quasi ducimus odit voluptatibus accusantium voluptate nihil nobis saepe, enim eos architecto minima voluptatum.</p>
</div>
</div>
</div>
</div>
<div class="col-md-3 pl-5 d-none d-md-inline">
<ul class="list-group shadow bg-white rounded">
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
<a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
</ul>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>