How to handle grids in bootstrap, grids inside grids

Question

I have three columns(col-md-4) in my footer and first column has two divided columns(col-md-6) again. I want those two columns inside the first column to be together in mobile view. How should I partition.?

What I tried was something like,

<div class="row">
<div class="col-md-4">
    <div class="col-md-6">

    </div>
    <div class="col-md-6">

    </div>
</div>
<div class="col-md-4">

</div>
<div class="col-md-4">

</div>

But I am getting the two columns one below another in mobile, I want them to be in same grid.

Answer 1

Change col-md-6 to col-6 as this is Bootstrap's 4 smallest screen case. col-md-6 will keep two columns next to each other on md (>=768px) sized screens and larger, but stack them below that breakpoint. And you will need to wrap that inner set of divs in a div with the class row.

<div class="row">
  <div class="col-md-4">
    <div class="row">
      <div class="col-6">
      </div>
      <div class="col-6">
      </div>
    </div>
  </div>
  <div class="col-md-4">
  </div>
  <div class="col-md-4">
  </div>
</div>