Bootstrap mixed grid layout

Question

I would like to define a layout which looks like this on large displays:

.----------------------------.
|       |        B           |
|  A    |____________________|
|       |                    |
|       |                    |
|       |                    |
|       |        C           |
|       |                    |
|_______|____________________|

"A" should be fixed width, while "B" and "C" should dynamically expand to fully cover the remaining available width (ie should not be maximized and leave an empty margin on large displays - I think this is the fluid layout).

Now, upon decreasing the screen width below a specific amount, I would like to these 3 blocks rearranged to be under each other in the order of A, B, C, with all 3 utilizing the full available width.

Can you help me with this please? So far I have the following setup:

<div class="container-fluid">
    <div class="col-md-2">A</div>
    <div class="col-md-10">B</div>
    <div class="col-md-10">C</div>
</div>

This looks fine in full width, but when decreasing the width, it starts to shrink also "A" in width which I do not want.

If I add a fixed width to "A", it collapses B & C under A too early when decreasing the width - I would like B & C to decrease dynamically, unlike A - I think specifying a width messes up fully the layout.

Here is a JSBin .

Answer 1

Here is something :

In collaboration with @Christina

(see comments)

Exemple with fixed column at 200px and min-width 600px :

Bootply : http://www.bootply.com/olRbQrHoWQ

HTML :

<div class="aside">
A
</div>
<div class="main">
   <div class="col-xs-12">
     <div class="row">
        <div class="col-xs-12 b">B</div>  
       </div>
     <div class="row">
        <div class="col-xs-12 c">C</div>  
       </div>
     </div>
</div>

CSS :

@media screen and (min-width: 600px){
   html, body{
      height:100%; 
   }
  .aside{
    height:100%;
    width:200px;
    float:left;
  }
  .main{   
      z-index: -1;
      position:absolute;
      background:cyan;
      width:100%;
      padding-left: 200px;
      float:left;
      height:100%;
    }

}

---

Updated : position:absolute is not usefull, and margin-left on .aside is better

Bootply : http://www.bootply.com/7Y9t8B1oAY

CSS :

@media screen and (min-width: 600px) { 
    html,
    body {
        height: 100%
    }
    .aside {
        height: 100%;
        width: 200px;
        float: left;
        margin-right: -200px;
    }
    .main {
        background: cyan;
        width: 100%;
        padding-left: 200px;
        float: left;
        height: 100%;
        position: relative;
        z-index: -1;
    }
}

Answer 2

Your Bootstrap code is slightly wrong as you are missing the row class. But if you nest B and C on different rows inside the col-md-10 , it works. I've added background colours to emphasise the blocks.

 .A { background-color: red; } .B { background-color: blue; } .C { background-color: green; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <div class="container"> <div class="row"> <div class="col-md-2 A"> A </div> <div class="col-md-10"> <div class="row"> <div class="B">B</div> <div class="C">C</div> </div> </div> </div> </div> 

Answer 3

Something like this ?

HTML:

<div class="container-fluid">
    <div class="col-md-2">A</div>
    <div class="col-md-10">
        <div class="col-md-10-sub">B</div>
        <div class="col-md-10-sub">C</div>
    </div>
</div>

CSS

.container-fluid {
    width: 80%;
    height: 80%;
    position: absolute;
    top: 5%;
    left: 5%;
}
.col-md-2 {
    position:absolute;
    top:0;
    left:0;
    width: 100px;
    height: 200px;
}
.col-md-10 {
    position:absolute;
    top:0px;
    left:100px;
    width: auto;
    height: 200px;
}
.col-md-10-sub {
    position:relative;
    left:0px;
    height: auto;
}

DEMO