From my perspective there are several improvements possible

• don`t use inline style if possible
• move the html out of the anchor tags
• no need to make use of col class for the buttons. Define the button width once and let the button float(left).
• set the button margin to “auto” so that the inner content is centered at all devices

Something like that ?

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
                <div class="col-6 p-5">
                    <div class="col-12 rounded bg-info p-5">1</div>
                </div>
                <div class="col-6 p-5">
                    <div class="col-12 rounded bg-info p-5">1</div>
                </div>
</div>
<div class="row">
                <div class="col-6 p-5">
                    <div class="col-12 rounded bg-info p-5">1</div>
                </div>
                <div class="col-6 p-5">
                    <div class="col-12 rounded bg-info p-5">1</div>
                </div>
</div>
<div class="row">
                <div class="col-6 p-5">
                    <div class="col-12 rounded bg-info p-5">1</div>
                </div>
                <div class="col-6 p-5">
                    <div class="col-12 rounded bg-info p-5">1</div>
                </div>
</div>
</div>

I was creating a website like a mobile app using bootstrap no hybrid or native just a bootstrap responsive site so I created a menu card for it but the major problem with my code is when I switch the mobile my alignment changing, for example, my text and card positions are changing. so how can do more responsive for all mobile screen size?

(Note – Downvoters please explain the reason for the downvote. So I can improve my question)

My Code :

<div class="container">

  <div class="row bg-info" style="height: 100px;">
   <div class="col-md-4 ">
    <a href="{{ URL::route('home') }}" style="text-decoration: none">
     <div class="card-block" style="padding-left: 165px;padding-top:20px;background-position: 0 0;">
      <div class="icons">
        <i class="fa fa-users fa-3x text-white"></i>
      </div>
    </div>
    <div>
     <h5 class="card-title text-white" style="padding-left: 160px; padding-bottom: 20px">{{Auth::user()->name}}</h5>
   </div>
 </a>
</div>
</div>
</div>
<div class="container" style="transform: translate(-3px, 13px);">
  <div class="row my-3">
    <div class="col-md-4">
      <a href="{{ URL::route('clients.index') }}" style="text-decoration: none">
        <div class="card text-center bg-info text-white">
          <div class="card-block" >             
            <h2><i class="fa fa-users fa-2x"style="padding-top: 20px"></i></h2>
          </div>
          <div class="row px-2 no-gutters">
           <h4 class="card-title">Manage Customer</h4>
         </div>
       </div>
     </a>
   </div>
   <div class="col-md-4">
    <a href="{{ URL::route('payments.index') }}" style="text-decoration: none">
      <div class="card text-center bg-info text-white">
        <div class="card-block" >             
          <h2><i class="fa fa-file-text-o fa-2x"style="padding-top: 20px"></i></h2>
        </div>
        <div class="row px-2 no-gutters">
         <h4 class="card-title">Collection Report</h4>
       </div>
     </div>
   </a>
 </div>
</div>
<div class="row my-3">
  <div class="col-md-4">
    <a href="{{ URL::route('billings.index') }}" style="text-decoration: none">
      <div class="card text-center bg-info text-white">
        <div class="card-block" >             
          <h2><i class="fa fa-university fa-2x" style="padding-top: 20px"></i></h2>
        </div>
        <div class="row px-2 no-gutters">
         <h4 style="margin-left: 40px" class="card-title">Billing</h4>
       </div>
     </div>
   </a>
 </div>
 <div class="col-md-4">
  <a href="{{ URL::route('paymentStatus') }}" style="text-decoration: none">
    <div class="card text-center bg-info text-white">
      <div class="card-block" >             
        <h2><i class="fa fa-usd fa-2x"style="padding-top: 20px"></i></h2>
      </div>
      <div class="row px-2 no-gutters">
       <h4  class="card-title">Paid/Unpaid</h4>
     </div>
   </div>
 </a>
</div>
</div>
<div class="row my-3">
  <div class="col-md-4">
    <a href="{{ URL::route('packages.index') }}" style="text-decoration: none">
      <div class="card text-center bg-info text-white">
        <div class="card-block" >             
          <h2><i class="fa fa-television fa-2x" style="padding-top: 20px"></i></h2>
        </div>
        <div class="row px-2 no-gutters">
         <h4 style="margin-left: 40px" class="card-title" style="margin-left:18px">Package</h4>
       </div>
     </div>
   </a>
 </div>
 <div class="col-md-4">
  <a href="{{ URL::route('areas.index') }}" style="text-decoration: none">
    <div class="card text-center bg-info text-white">
      <div class="card-block" >             
        <h2><i class="fa fa-map-marker fa-2x"style="padding-top: 20px"></i></h2>
      </div>
      <div class="row px-2 no-gutters">
       <h4 class="card-title" style="margin-left:15px">Add Area</h4>
     </div>
   </div>
 </a>
</div>
</div>
</div>

My output :

Code link :

Codepen