Свернуть загрузочную карту на экранах sm и \ или md

Question

Я использую карту bootstrap 4.1 для отображения внутри категорий на правой боковой панели - Пример карты image ;

На маленьких экранах я хочу свернуть этот card, потому что он большой и идет первым - мобильный пример .

Так как я могу свернуть карту на экранах sm и md, а не свернуть на экранах lg? Или мне не нужно использовать 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

Можно просто использовать встроенные классы Bootstrap, чтобы прятаться на маленьких экранах. https://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements

будет выглядеть примерно так (не проверено)

<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 d-none d-lg-block">
  <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>

Все, что он делает, это проверяет медиазапросы на ширину экрана и применяет display:none, если размер экрана меньше, чем установленный вами порог.

Answer 2

<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>

Класс d-lg-none скрывает кнопку для размеров экрана lg и xl, а класс d-lg-block показывает div для размеров экрана lg и xl.Я использую значок свертывания для стиля света навигационной панели, возможно, вам придется настроить его так, чтобы он соответствовал вашей навигационной панели.

Answer 3

Вы можете настроить это так:

<div class="card">
   <div class="card-header">
     <a data-toggle="collapse" href="#test-block" aria-expanded="true" aria-controls="test-block">
        card header
     </a>
   </div>
   <div id="test-block" class="collapse">
    <div class="card-block">
        card block
    </div>
  </div>
</div>

И будет делать то, что ты пытаешься сделать.