Как создать bootstrap карточное меню для мобильных?

Question

Я создавал веб-сайт, похожий на мобильное приложение, использующий bootstrap без гибридного или нативного сайта, просто сайт с поддержкой bootstrap, поэтому я создал для него карту меню, но главная проблема с моим кодом заключается в том, что при переключении мобильного телефона мое выравнивание меняются, например, мои текстовые и карточные позиции. так, как можно сделать более отзывчивым для всех размеров экрана мобильного телефона?

(Примечание - Downvoters, пожалуйста, объясните причину понижения. Поэтому я могу улучшить свой вопрос)

Мой код:

<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>

Мой вывод:

Код ссылки:

Codepen

Answer 1

Что-то в этом роде?

<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>

Answer 2

С моей точки зрения, возможно несколько улучшений

• не используйте встроенный стиль, если это возможно
• переместите html из тегов привязки
• нет необходимости использовать класс col для кнопок. Определите ширину кнопки один раз и дайте кнопке плавать (влево).
• установите для поля кнопки значение «auto», чтобы внутреннее содержимое центрировалось на всех устройствах