从固定的侧边栏制作手风琴

Question

对不起，英语不好，但是我将尝试在此处解释我要完成的工作，因此我已经修复了包含引导卡的侧边栏，但是我希望在移动设备上将此侧边栏变成手风琴，这样吗？

<div class="col-md-4 sidebar">
  <div class="library-title" style="color: black;">
     <p class="card-title-main card-title-border" style="font-size: 1.25rem">Library</p>
     <!--Start card class on side bar-->
        <div class="card mb-3 shadow class-link">
           <a href="#" style="text-decoration: none; color: black;">
           <div class="row no-gutters">
              <div class="col-md-4">
                 <img src="resources/pics/dummy.png" class="card-img-library" alt="...">
              </div>
              <div class="col-md-8">
                 <div class="card-body card-active">
                   <h5 class="card-title">Basic Adobe Ilustrator</h5>
                   <div class="card-flex">
                   </div>
                 </div>
                 <div class="date-class">
                    <p class="date-text">Mulai Kelas</p>
                    <p class="date-text">11 Juni 2020</p>
                 </div>
              </div>
           </div>
        </a>
     </div>

这是来自其他内容的手风琴，我希望我的侧边栏像这样

    <div id="accordion1" class="accordion">
      <div class="card mb-0">
        <div class="card-header collapsed" data-toggle="collapse" href="#collapseOne">
          <a class="card-title" style="font-weight: bold"> Webinar </a>
        </div>
        <div id="collapseOne" class="card-body collapse" data-parent="#accordion1">
          <div class="row">
            <div class="col-md-3 col-4">
              <a href="#" style="text-decoration: none; color: black;">
                <div class="card card-content">
                  <img class="card-img-top thumb-img" src="resources/pics/thumb1.jpg" alt="Card image cap">
                  <div class="card-body">
                    <p class="video-title" style="font-weight: bold">Video 1</p>
                    <p class="card-text">Membuat Vector dari youtube</p>
                  </div>
                </div>
              </a>
            </div>
            <div class="col-md-3 col-4">
              <a href="#" style="text-decoration: none; color: black;">
                <div class="card card-content">
                  <img class="card-img-top thumb-img" src="resources/pics/thumb2.png" alt="Card image cap">
                  <div class="card-body">
                    <p class="video-title" style="font-weight: bold">video 2</p>
                    <p class="card-text">Membuat Vector Kartun dari youtube</p>
                  </div>
                </div>
              </a>
            </div>
            <div class="col-md-3">
            </div>
            <div class="col-md-3">
            </div>
          </div>
        </div>
      </div>
    </div>

我希望工具条变得像这样的手风琴

固定的侧边栏