Question: I'm building a website with Bootstrap. I'm still new to Boostrap and now still struggling in responsive grid design.

So my question is, how if I want to have row with 4 columns when screen is large, but when screen is in medium, I want it become just 3 columns, one of it is to be stacked to the other column (i.e column 3 stacked to the top of column 4).

To be clear, I'll illustrate my design:

> 
> **When screen is large:**
> 
> 
> 

[![Large screen preview](https://i.stack.imgur.com/TPOJd.png)](https://i.stack.imgur.com/TPOJd.png)

> 
> **When screen is medium, become:**
> 
> 
> 

columns (stuffs is stacked to top of chatbar column):

[![Medium screen preview](https://i.stack.imgur.com/cGbgX.png)](https://i.stack.imgur.com/cGbgX.png)

Above pictures is just dummy I created with html table

How to achieve this? Is this doable using pure bootstrap css?

Answer: 
You can use nested columns like this...

```
<div class="container-fluid">
    <div class="row">
        <div class="col-md-2 col-sm-2">
            sidebar
        </div>
        <div class="col-md-5 col-sm-6">
            newsfeed
        </div>
        <div class="col-md-5 col-sm-2">
            <div class="row">
                <div class="col-md-6 col-sm-12">
                    stuff
                </div>
                <div class="col-md-6 col-sm-12">
                    chatbar
                </div>
            </div>
        </div>
    </div>
</div>

```

Also, you didn't specify sm/xs screens so this layout will stack vertically on xs screens. You could prevent this by changing the `-sm-` to `-xs-`

<http://www.codeply.com/go/DC9wMAszTC>
try this mark up--

resize the browser width to see the effect.

**EDIT**

I think this is what you need. check out the update snippet. adjust the height of the columns according to your wish.

```html
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
           <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
           </head>
           <body>
           <div class="row">
           <div class="col-lg-2 col-md-2" style="background-color: red;">
             sidebar
           </div>
             <div class=" col-lg-5    col-md-6 " style="background-color: black;">
             newsfeed
           </div>
             <div class="col-md-4  col-lg-5">
               <div class="row">
           <div class="col-md-12  col-lg-4 " style="background-color: blue;">

             stuffs
             </div>
           <div class="col-md-12  col-lg-8  " style="background-color: green;">

             chatbar
             </div>
               </div>
           </div>
           </div>
           </body>
           </html>
```