How can I prevent a break in a Bootstrap 3 row as the viewport size reduces?

Still on Bootstrap 3, but I'm hoping this hasn't changed significantly. I have a Codeply example. This produces the output shown in the attached image:

Normally, I have a row made up of a 4/8 column split (the first row shown). As the viewport size drops below 992 px, this displays as the col-md-4 above the col-md-8, which is fine.

However, I also have rows with a 4/4/4 column split (the second row shown). When the viewport drops below 992px, this is stacked up as 3 rows. What I'd like to do instead is stack in two rows, where the second two col-md-4s appear alongside each other:

<-------  .col-md-4  ------->
<-- .col-md-4 | .col-md-4 -->

My attempt at this is shown in the third row above, but it doesn't work - it still stacks 3-up. Any ideas how I can fix this?

.row {
  margin-bottom: 20px;
}

.row .row {
  margin-top: 10px;
  margin-bottom: 0;
}

[class*="col-"] {
  padding-top: 15px;
  padding-bottom: 15px;
  background-color: #eee;
  background-color: rgba(86, 61, 124, .15);
  border: 1px solid #ddd;
  border: 1px solid rgba(86, 61, 124, .2);
}

hr {
  margin-top: 40px;
  margin-bottom: 40px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-md-4">
      .col-md-4
    </div>
    
    <div class="col-md-8">
      .col-md-8
    </div>
  </div>

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

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

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

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

Solution

You can stack column breakpoint classes on a single div to have various grid effects at various breakpoints.

For example, you can define the first column's class "col-sm-12 col-md-4" so that at the small breakpoint, it's full 12 columns. The remaining two that you wish to stack side-by-side can be defined as "col-sm-6 col-md-4" so that at the small breakpoint, they're 6 wide and stack side-by-side.

If you wish to retain the side-by-side behavior even down to the XS breakpoint, you can just change the col-sm to col-xs.

h4 {
  margin-top: 25px;
}

.row {
  margin-bottom: 20px;
}

.row .row {
  margin-top: 10px;
  margin-bottom: 0;
}

[class*="col-"] {
  padding-top: 15px;
  padding-bottom: 15px;
  background-color: #eee;
  background-color: rgba(86, 61, 124, .15);
  border: 1px solid #ddd;
  border: 1px solid rgba(86, 61, 124, .2);
}

hr {
  margin-top: 40px;
  margin-bottom: 40px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<div class="container">
<!-- normal row -->
<div class="row">
    <div class="col-md-4">
        .col-md-4
    </div>
    <div class="col-md-8">
        .col-md-8
    </div>
</div>

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