Question: I am trying to make this setup in boostrap 3, is there a way to do it?

[![setup before and after](https://i.stack.imgur.com/d2tlZ.png)](https://i.stack.imgur.com/d2tlZ.png)

Answer: 
It's fairly easy to do, you just need to make it a nested structure and apply the correct `col-lg-x`, `col-md-x`, `col-sm-x`, `col-xs-x` classes to each level.

Here's a quick little throw together that does exactly what you're looking for:

```css
div {
    border: 1px solid black;
    padding: 10px;
}
```

```html
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://getbootstrap.com/dist/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="http://getbootstrap.com/assets/js/ie-emulation-modes-warning.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">1</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-6">2.1</div>
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-6">2.2</div>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-6">3.1</div>
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-6">3.2</div>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-6">4.1</div>
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-6">4.2</div>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-6">5.1</div>
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-6">5.2</div>
    </div>
</div>
```

**Note**: I added a 1px `border` and a 10px `padding` to make it more noticeable.

For a better demonstration of this, here's a Bootply: <http://www.bootply.com/WOrm6c6sm1>

**References**: <http://getbootstrap.com/css/#grid>
You have to learn the [grid bootstrap system](http://getbootstrap.com/css/#grid). You can define the size for each device. [Take a look at bootstrap](http://getbootstrap.com/css/#grid). The idea is simple, col-xs defines phones width, col-sm defines tablet width, col-md defines desktop width and col-lg defines large devices like TV's.

See the example below, you can preview (like mobile) and click at "Full Page" to preview bigger devices.

I hope it help

```css
.well{
  font-size:40px;
  font-weight: 500;
  text-align:center;
}
```

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

<div class="container">

  <div class="col-sm-6 col-xs-12 well">

    1

  </div>

  <div class="col-sm-3 col-xs-12">

    <div class="col-sm-12 col-xs-6 well">
      2.1
    </div>

    <div class="col-sm-12 col-xs-6 well">
      2.2
    </div>

  </div>

  <div class="col-sm-3 col-xs-12">

    <div class="col-sm-12 col-xs-6 well">
      3.1
    </div>

    <div class="col-sm-12 col-xs-6 well">
      3.2
    </div>

  </div>

</div>
```