Bootstrap col-md-3 with 2 sub cols under

Question

I'm trying to figure out how to do the following grid with bootstrap for a search.

I have 4 "col-md-3" divs but under the last "col-md-3" div I want to have 2 cols under it with each occupying half of 'col-md-3" widths.

I want the two under the last col to be stacked together.

I could have used a five col width like whats here >> https://stackoverflow.com/a/22799354/8011344 but the contents under the last col divs just requires a small width like 12.5%

Any Ideas

A picture of what Im trying to do

https://i.sstatic.net/gv3a7.png

Answer 1

First add four col-sm-3 and in last col add row with two col with col-xs-6which have 50% value

[class*='col-']{
  background:#f0f0f0;
  margin-bottom:5px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
  <div class="col-xs-3">col-xs-3</div>
  <div class="col-xs-3">col-xs-3</div>
  <div class="col-xs-3">col-xs-3</div>
  <div class="col-xs-3">
    <div class="row">
      <div class="col-xs-6">col-xs-6</div>
      <div class="col-xs-6">col-xs-6</div>
    </div>
  </div>
</div>