Как сделать карусель на мобильном телефоне и планшете, которая пропадает при расширении md

Фактически, я делаю веб-сайт, где для полноразмерного дизайна требуется .row с 3 столбцами внутри каждого столбца с картой bootstrap4. Это легко, но когда он уменьшится до размера планшета и мобильного телефона, это должна быть карусель из этих трех изображений.

Возможно ли это сделать? факт использования сетки делает эту карусель немного запутанной.

вот что я пытаюсь кодировать:

Полный размер:

Мобильный:

это мой код для полного размера

<div class = "row justify-content-center">
  <div class = "col-md-4 d-flex justify-content-center">
    <div class = "card card-radius" style = "width: 18rem;">
      <img src = "https://res.cloudinary.com/gnprojects/image/upload/v1546624022/cursos_1.jpg" class = "card-img-top card-image-radius" alt = "...">
      <div class = "card-body">
        <h3 class = "card-title">Panaderia Basica</h3>
        <p class = "card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <a href = "#">Ver mas  <i class = "fas fa-angle-right"></i></a>
      </div>
    </div>
  </div>
  <div class = "col-md-4 d-flex justify-content-center">
    <div class = "card card-radius" style = "width: 18rem;">
      <img src = "https://res.cloudinary.com/gnprojects/image/upload/v1546624022/cursos_1.jpg" class = "card-img-top card-image-radius" alt = "...">
      <div class = "card-body">
        <h3 class = "card-title">Panaderia Basica</h3>
        <p class = "card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <a href = "#">Ver mas  <i class = "fas fa-angle-right"></i></a>
      </div>
    </div>
  </div>
  <div class = "col-md-4 d-flex justify-content-center">
    <div class = "card card-radius" style = "width: 18rem;">
      <img src = "https://res.cloudinary.com/gnprojects/image/upload/v1546624022/cursos_1.jpg" class = "card-img-top card-image-radius" alt = "...">
      <div class = "card-body">
        <h3 class = "card-title">Panaderia Basica</h3>
        <p class = "card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <a href = "#">Ver mas  <i class = "fas fa-angle-right"></i></a>
      </div>
    </div>
  </div>
</div>

Я ожидаю, что это превратится в карусель, когда достигнет размера планшета. Придется ли мне закодировать один и тот же блок кода в теги карусели и использовать запросы @media, чтобы скрыть полноразмерный код и показать карусель на размере планшета?