Need to make responsive card, 4 to be showed on desktop and 2 in mobile

Question

I am creating a website, i am beginner in web design i want to create a design of category to be showed 4 cards in desktop and 2 card in mobile view.

My code below

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<div class="categories-main">
  <div class="container bg-light rounded">
    <br>
    <div class="h4 font-weight-bold text-center py-2">Categories</div>
    <br>
    <div class="row">
      <div class="col-lg-3 col-md-6 my-lg-2 my-2">
        <div class="box bg-white">
          <div class="d-flex align-items-center">
            <div class="rounded-circle mx-3 text-center d-flex align-items-center justify-content-center blue"> <img src="#" alt=""> </div>
            <div class="d-flex flex-column"> <b>Public Speech</b>
              <a href="#">
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <br> Categories
  <br>

I tried a lot of changes but didn't get what i want. I expect from developers to help in this.

Answer 1

Refering to bootstrap documentation, max columns numbers are 12. So you need to make col-6 col-6 for mobile (will make 2 columns (12/2 = 6)) and for desktop col-3 col-3 col-3 col-3 (will make 4 columns (12/4 = 3)).

See simplified example below:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

    <div class="row">
      <div class="col-6 col-lg-3 my-lg-2 my-2">
        <div class="box bg-red">
           1
        </div>
      </div>
      <div class="col-6 col-lg-3 my-lg-2 my-2">
        <div class="box bg-blue">
           2
        </div>
      </div>
      <div class="col-6 col-lg-3 my-lg-2 my-2">
        <div class="box bg-green">
           3
        </div>
      </div>
      <div class="col-6 col-lg-3 my-lg-2 my-2">
        <div class="box bg-black">
           4
        </div>
      </div>
    </div>