如何在卡上设置轮播指示器的位置和轮播控件，使其对所有屏幕尺寸都响应

Question

我正在尝试创建一个响应所有屏幕尺寸的轮播控件和轮播指示器。

我必须为每个屏幕尺寸写很多CSS，这根本不是问题，但是如果有人已经解决了这个问题而没有写很多CSS，我想学习它。

.chevron {
    position: relative;
    top: -5.5rem;
    right: -33rem;
}

@media screen and (max-width: 414px)
.chevron {
    position: relative;
    top: -5.5rem !important;
    right: -19rem !important;
}

<div class="col-md-6 col-lg-6 mb-5 sm-12 m-b-2 m-t-05 m-b-15 m-b-lg-63">
    <div class="card h-115">
      <img class="card-img-top" src="./assets/img/meatball.jpg" alt="">
      <div class="card-body">
        <div class="row">
          <div class="col-sm-10 col-md-11 col-lg-11">
            <h2 class="card-title ">your title</h2>
        </div>
        <div class="col-auto chevron">
        <span>
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <i class="fas fa-chevron-left fa-2x"></i></a>
        <a class="right carousel-control pl-3" href="#myCarousel" data-slide="next">
        <i class="fas fa-chevron-right fa-2x"></i></a>
        </span>
        </div>
        </div>
        <p class="card-text">Body copy will be sized as such and Brief Two to Three lines of description 
          of the highlighted sponsor. Describe the sponsor/vendor in a way that drwas clicks.</p>
          <div class="apply-now mt-3">
              LEARN MORE <span class="pl-2"><i class="fas fa-caret-right"></i></span>
              <span class="circle"><a class="active" href="#"><i class="fas fa-circle"></i></a>
              <a class="non-active pl-2" href="#"><i class="fas fa-circle"></i></a></span>
            </div>  

      </div>
      <!--<div class="card-footer">
        <a href="#" class="btn btn-primary">Find Out More!</a>
      </div>-->
    </div>
  </div>