Collapse bootstrap card on sm and\or md screens

Question

I use a Bootstrap 4.1 card to display categories on the right sidebar (card example image).

On small screens, I want to collapse this card, because it is big and goes first (card on mobile example image).

So how can I collapse the card on sm and md screens, and not collapse it on lg screens? Or maybe I don't need to use a card?

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="container">
<div class="card mb-3">
  <h5 class="card-header">Categories</h5>
  <div class="card-body">
    <h5><a href="http://rtss2.loc/info">All</a></h5>
    Categories here
  </div>
</div>
</div>

Answer 1

<button class="btn d-lg-none" type="button" data-toggle="collapse" data-target="#example-collapse">
    <span class="navbar-light"><span class="navbar-toggler-icon"></span></span>
</button>

<div id="example-collapse" class="collapse d-lg-block">
    <!-- your card here -->
</div>

The class d-lg-none hides the button for lg and xl screen sizes and the class d-lg-block shows the div for lg and xl screen sizes. I am using the collapse icon for the navbar-light style, you may need to adjust this to match your navbar.