我创建了三张卡片，它工作得很好，但在移动的视图中它堆叠在this is the result上我导入了所有的jquery和css它工作得很好

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
<section class="bg-light p-4">
    <div class="container col-md-12 ">
        <h1 class="text-center">services</h1>
        <div class="row text-center ">
            <div class="col-md-4 col-4 p-2 position-static "> 
                <div class="card pt-2 bg-info text-white " style="width: 17em;">
                    <!-- <img class="card-img-top" src="..." alt="Card image cap"> -->
                    <i class="display-1  fa fa-desktop icon-lg icon-purple icon-bg-purple icon-bg-circle mb-3"></i>
                    <div class="card-body">
                      <h5 class="card-title">Web App Development</h5>
                      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                      <!-- <a href="#" class="btn btn-primary">Go somewhere</a> -->
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-4 p-2 position-static "> 
              <div class="card pt-2 bg-info text-white " style="width: 17em;">
                  <!-- <img class="card-img-top" src="..." alt="Card image cap"> -->
                  <i class=" display-1 fa fa-desktop icon-lg icon-purple icon-bg-purple icon-bg-circle mb-3"></i>
                  <div class="card-body">
                    <h5 class="card-title">Web App Development</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <!-- <a href="#" class="btn btn-primary">Go somewhere</a> -->
                  </div>
              </div>
            </div>
            <div class="col-md-4 col-4 p-2 position-static"> 
              <div class="card pt-2 bg-info text-white" style="width: 17em;">
                  <!-- <img class="card-img-top" src="..." alt="Card image cap"> -->
                  <!-- <i class="display-1 fa fa-desktop icon-lg icon-purple icon-bg-purple icon-bg-circle mb-3"></i> -->
                  <i class=" display-1 fa fa-desktop icon-lg icon-purple icon-bg-purple icon-bg-circle mb-3"></i>
                  <div class="card-body">
                    <h5 class="card-title">Web App Development</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <!-- <a href="#" class="btn btn-primary">Go somewhere</a> -->
                  </div>
              </div>

          </div>
        </div>
    </div>
</section>

这是在正常视图下，工作正常，this what I expected