轮播在台式机上每行4项，然后在移动设备上缓慢减少到每行1项（Boostrap 4）

Question

我正在使用this bootstrap carousel code并将其更改为每行4个项目，如下所示。这也是在桌面上的样子。

我希望根据不同的设计更改布局。例如，轮播可能会从选项卡上的每行2个项目和移动设备上的每行1个项目更改。这是处理此代码的方法吗？

我是Bootstrap的初学者。希望你们中的一些可以给我一些建议。谢谢！

$('.carousel').carousel()

body {
  background-color: #25b7bc !important;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>

<div class="container">
  <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    </ol>

    <div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
      <div class="row">
        <div class="col-lg-3">
          <img src="https://placehold.it/300" class="rounded-circle">
        </div>
        <div class="col-lg-3">
          <img src="https://placehold.it/300" class="rounded-circle">
        </div>
        <div class="col-lg-3">
          <img src="https://placehold.it/300" class="rounded-circle">
        </div>
        <div class="col-lg-3">
          <img src="https://placehold.it/300" class="rounded-circle">
        </div>
      </div>
    </div>

    <div class="carousel-item">
      <div class="row">
        <div class="col-xs-3">
          <img src="https://placehold.it/300.jpg" class="rounded-circle">
        </div>
        <div class="col-xs-3">
          <img src="https://placehold.it/300.jpg" class="rounded-circle">
        </div>
        <div class="col-xs-3"></div>
        <div class="col-xs-3"></div>
      </div>
    </div>
    </div>
  </div>
</div>