I created three cards and it works fine, but in mobile view it stacks over this is the result I have imported all jquery and css it works fine
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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 is at normal view this works fine, this what I expected
Try to remove inline width styles from cards.
style="width: 17em;"
Demo
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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 ">
<!-- <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 ">
<!-- <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">
<!-- <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>