Me preguntaba si existe un método de arranque nativo para cambiar dinámicamente la clase de un elemento según el tamaño de la pantalla.

Estoy desarrollando una página web que tiene varios elementos de tarjeta que contienen texto desplazable. Cuando se ve en una computadora de escritorio no hay problema, las tarjetas están dispuestas horizontalmente. Cuando se visualizan en un teléfono móvil, las tarjetas están dispuestas verticalmente, esto implica que para mover la pantalla y cambiar de una tarjeta a otra, tengo que desplazar todo el texto de una tarjeta antes de llegar a la siguiente.

Al documentar en bootstrap, vi que un elemento de tipo acordeón puede funcionar por mí, al hacerlo, un usuario decidirá activamente alternar un acordeón para leer el contenido y alternarlo nuevamente para "cerrarlo" y desplazar la pantalla

Me preguntaba si este cambio podría realizarse directamente a través de bootstrap o debería hacerse a través de javascript y, sobre todo, cómo

Acordeón

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

Tarjeta

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

gracias a todos los que me respondan