how can i responsive boxes in lg,md.sm mode in boootstrap5?

Question

i wanna my boxes in col-sm be col-12 and in col-md be col-6 somebody tell me what should i do if there is tutorial about this problem please send me the link, thank you.

  <div class="content container-fluid col-lg-12 col-md-12 my-2 col-sm-12">
    <div class="row">
      <div class="col-lg-3 col-sm-12 col-md-6 p-3">
        <div class="boxs pb-2">
          <img src="./images/images (1).jpeg" alt="">
          <a>example1</a>
        </div>
      </div>
      <div class="col-lg-3 col-sm-12 col-md-6 p-3">
        <div class="boxs pb-2">
          <img src="./images/images (2).jpeg" alt="">
          <a>example2</a>
        </div>
      </div>
      <div class="col-lg-3 col-sm-12 col-md-6 p-3">
        <div class="boxs pb-2">
          <img src="./images/images (3).jpeg" alt="">
          <a>example3</a>
        </div>
      </div>
      <div class="col-lg-3 col-sm-12 col-md-6  p-3">
        <div class="boxs pb-2">
          <img src="./images/images.jpeg" alt="">
          <a>example4</a>
        </div>
      </div>
    </div>
  </div>

Answer 1

Bootstrap is mobile first, and with that in mind, if you put col-12, it will work from smartphones to desktops. Following this rule, col-sm-12 will always be col-12 from size sm (576px) to the largest. I would recommend always putting a col-"size-of-col" to start, and working with the rest of the classes afterwards in ascending order (sm>md>lg>xl), for example:

<div class="row">
    <div class="col-12 col-md-6 col-lg-3">
        <img src="..." alt="...">
    </div>
</div>

But, I see that you have a class called "boxs", could you show the css of this class, it would help a lot to understand your problem. And your first div called "content", it doesn't need to have all the prefixes (sm,md,lg) for a single size (12), you could just put col-12 for example.