Отображение изображений, отличающихся в мобильном представлении и на рабочем столе, с помощью Bootstrap 4

Question

Я отображаю в одной строке 6 столбцов в виде изображений на своем веб-сайте и использую загрузчик 4 для погружений, если я смотрю веб-сайт в мобильном режиме, значит, если размер (ширина) экрана уменьшается, я хочу отображать изображения как 4 или 3 столбца в строке.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="container shadow">
   <div class="row text-center">

    <div class="col-sm-2">
        <a href="category_details.php?id=Advertising Agencies">
            <img src="https://pbs.twimg.com/profile_images/558329813782376448/H2cb-84q_400x400.jpeg" height="70" width="70">
            <p class="text-para">image1</p>
        </a>
    </div>

    <div class="col-sm-2">
      <a href="category_details.php?id=Advocate">
      <img src="https://pbs.twimg.com/profile_images/558329813782376448/H2cb-84q_400x400.jpeg" height="70" width="70">
      <p class="text-para">image2</p>
    </a>
    </div>

    <div class="col-sm-2">
      <a href="category_details.php?id=Agriculture">
      <img src="https://pbs.twimg.com/profile_images/558329813782376448/H2cb-84q_400x400.jpeg" height="70" width="70">
      <p class="text-para">image3</p>
    </a>
    </div>
    <div class="col-sm-2">
      <a href="category_details.php?id=Architects">
      <img src="https://pbs.twimg.com/profile_images/558329813782376448/H2cb-84q_400x400.jpeg" height="70" width="70">
      <p class="text-para">image4</p>
    </a>
    </div>
    <div class="col-sm-2">
      <a href="category_details.php?id=Astrologers">
      <img src="https://pbs.twimg.com/profile_images/558329813782376448/H2cb-84q_400x400.jpeg" height="70" width="70">
      <p class="text-para">image5</p>
    </a>
    </div>

    <div class="col-sm-2">
      <a href="category_details.php?id=Automobiles">
      <img src="https://pbs.twimg.com/profile_images/558329813782376448/H2cb-84q_400x400.jpeg" height="70" width="70">
      <p class="text-para">image6</p>
    </a>
    </div>

  </div>

Здесь я хочу отобразить изображения 4 или 3 изображения в строке, если ширина экрана уменьшается, но при этом в мобильном виде отображается одно изображение в строке. Пожалуйста, если кто-нибудь знает, Пожалуйста, предложите мне правильный путь.

Answer 1

для маленького экрана вы используете

<div class="col-4 col-sm-2">

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="container shadow">
   <div class="row text-center">

    <div class="col-4 col-sm-2 col-md-2">
        <a href="category_details.php?id=Advertising Agencies">
            <img src="https://pbs.twimg.com/profile_images/558329813782376448/H2cb-84q_400x400.jpeg" height="70" width="70">
            <p class="text-para">image1</p>
        </a>
    </div>

    <div class="col-4 col-sm-2 col-md-2">
      <a href="category_details.php?id=Advocate">
      <img src="https://pbs.twimg.com/profile_images/558329813782376448/H2cb-84q_400x400.jpeg" height="70" width="70">
      <p class="text-para">image2</p>
    </a>
    </div>

    <div class="col-4 col-sm-2 col-md-2">
      <a href="category_details.php?id=Agriculture">
      <img src="https://pbs.twimg.com/profile_images/558329813782376448/H2cb-84q_400x400.jpeg" height="70" width="70">
      <p class="text-para">image3</p>
    </a>
    </div>
    <div class="col-4 col-sm-2 col-md-2">
      <a href="category_details.php?id=Architects">
      <img src="https://pbs.twimg.com/profile_images/558329813782376448/H2cb-84q_400x400.jpeg" height="70" width="70">
      <p class="text-para">image4</p>
    </a>
    </div>
    <div class="col-4 col-sm-2 col-md-2">
      <a href="category_details.php?id=Astrologers">
      <img src="https://pbs.twimg.com/profile_images/558329813782376448/H2cb-84q_400x400.jpeg" height="70" width="70">
      <p class="text-para">image5</p>
    </a>
    </div>

    <div class="col-4 col-sm-2 col-md-2">
      <a href="category_details.php?id=Automobiles">
      <img src="https://pbs.twimg.com/profile_images/558329813782376448/H2cb-84q_400x400.jpeg" height="70" width="70">
      <p class="text-para">image6</p>
    </a>
    </div>

  </div>