I was wondering if there is a native bootstrap method to dynamically change the class of an element based on the screen size.

I am developing a web page that has multiple card elements containing scrollable text. When viewed on a desktop no problem, the cards are arranged horizontally. When viewed on a mobile phone, the cards are arranged vertically, this implies that to move the screen and switch from one card to another, I have to scroll all the text of one card before reaching the next.

Documenting on bootstrap I saw that an accordion type element can do for me, in doing so a user will actively decide to toggle an accordion to read the content and toggle it again to "close" it and scroll the screen

I was just wondering if this switch could take place directly via bootstrap or should it be done via javascript, and above all how

Accordion

  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        TITLE HERE
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        TEXT HERE
      </div>
    </div>
  </div>
</div>

Card

<div class="card">
  <div class="card-body">
    <h5 class="card-title">TITLE HERE</h5>
    <p class="card-text">
     TEXT HERE
    </p>
  </div>
</div>

Thanks to everyone who will answer me