Responsive bootstrap grid

Question

I'm making bootstrap grid, I run into problem, that i doesn't now how to fix. Basically in mobile view I need that second block goes next to first block, but i really doesn't know how to do it.

I have tried to google grid, but can't really find nothing similar to mine.

<div class="container-fluid" id="MainText">
<div class="row">
  <div class="col-sm-12 col-md-3 ">
    <div class="row">
      <div class="col-sm-6 ">
        <div class= "1">
          <h4 id ="Galv_pakalp_Header">Mūsu galvenie pakalpojumi</h4>
                <p>some text</p>
        </div> 
      </div> 
    </div>
    <div class="row">
      <div class="col-sm-6 ">
        <div class= "2">
          <h4 id ="Popul_Griez_Header">Populārākie vīrešu griezumi</h4>
               <p>some text</p>
         </div> 
        </div>
    </div>
  </div>
  <div class="col-md-9 ">
    <h2 id ="Barb_cons">Barb_cons</h2>
    <img src="" class="rounded float-end" alt="" >
    <p>some text</p>
  </div>
</div>
</div>

Answer 1

Figured on my own, putting code for others

  <div class="container-fluid">
<div class="row">
  <div class="col-sm-12 col-lg-3">
    <div class="row">
        <div class="col-sm-6 col-lg-12">Text1</div>
        <div class="col-sm-6 col-lg-12">Text2</div>
    </div>
  </div>
  <div class="col-lg-9">Text3</div>
</div>