title: How can I turn a list-group into a dropdown menu with Bootstrap 4?
body: <p>I am working with the lastest version of Bootstrap 4 and I'm trying to make my 'list-group' responsive. I've been looking for different solutions but I couldn't find anything I could apply to my problem.</p>
  
  <p>My 'list-group' is supposed to be a tab, with its content showed on the left. While on desktop it works perfectly, it's not well designed for the mobile and, while looking for a solution, I realized that a dropdown menu shown on the top of the content would have worked. I have no clue how to 'convert' my list into a dropdown without breaking it tho.</p>
  
  <p>This is how it looks now, red background for the selected tab and a different red for when hovered: <a href="https://i.stack.imgur.com/WfzsQ.png" rel="nofollow noreferrer">list-group</a>. I'd love to move it on the top of its content when on mobile view, so when I click on the title of the category, I can expand its submenu.</p>
  
  <p>The code is this:</p>
  
  <pre><code>&lt;div class="col-xl-3 "&gt;
        &lt;div class="list-group list-group-flush" id="list-tab" role="tablist"&gt;
  
          &lt;h4&gt; Lorem Ipsum &lt;/h4&gt;
          &lt;/br&gt;
          &lt;a class="list-group-item list-group-item-action active" id="list-who-list" data-toggle="list" href="#list-who" role="tab" aria-controls="who"&gt;dolor sit amet quo te&lt;/a&gt;
          &lt;a class="list-group-item list-group-item-action" id="list-info-list" data-toggle="list" href="#list-info" role="tab" aria-controls="info"&gt;lorem prompta deseruisse&lt;/a&gt;
          &lt;/br&gt;
          &lt;h4&gt; Mei ipsum neglegentur ex&lt;/h4&gt;
          &lt;/br&gt;
          &lt;a class="list-group-item list-group-item-action" id="list-contact-list" data-toggle="list" href="#list-contact" role="tab" aria-controls="contact"&gt;est probo&lt;/a&gt;
          &lt;a class="list-group-item list-group-item-action" id="list-where-list" data-toggle="list" href="#list-where" role="tab" aria-controls="where"&gt;nusquam eu&lt;/a&gt;
          &lt;/br&gt;
          &lt;h4&gt; Quo solum soleat&lt;/h4&gt;
          &lt;/br&gt;
          &lt;a class="list-group-item list-group-item-action" id="list-get-list" data-toggle="list" href="#list-get" role="tab" aria-controls="get"&gt;adversarium id&lt;/a&gt;
          &lt;a class="list-group-item list-group-item-action" id="list-send-list" data-toggle="list" href="#list-send" role="tab" aria-controls="send"&gt;qui ex minim discere&lt;/a&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>So basically when on small screens like mobile/tablet, my whole list should go on the top of the tab, converting the 'h4' into a dropdown menu and once it's clicked, it shows the respective item.</p>
  
  <p>Maybe creating a dropdown menu only for small screens can do the trick, but I'm not sure if it can be considered as a real solution or more like a bad shortcut.</p>