html - Responsive layout with nested divs using bootstrap -

responsive layout nested divs using bootstrap here html code

  <div class="container-fluid" style="height: 350px;">         <div class="row-fluid clearfix" style="height: 100%">             <div class="col-md-9 column" style="height: 100%;">                 <div class="row clearfix" style="height: 50%;">                     <div class="col-md-4 column" style="height: 100%;background-color: red">                     </div>                     <div class="col-md-4 column" style="height: 100%;background-color: green">                     </div>                     <div class="col-md-4 column" style="height: 100%;background-color: blue">                     </div>                 </div>                 <div class="row clearfix" style="height: 50%;">                     <div class="col-md-12 column" style="height: 100%;background-color: pink">                     </div>                 </div>             </div>             <div class="col-md-3 column" style="height: 100%;background-color: yellow">             </div>         </div>     </div> 

output:

while increasing browser screen width

here output after increasing

here green , blue colored div missing

my expected output:

please me out..

you need define classes mobile view well, otherwise elements can overlap each other. example:

col-xs-12 col-md-4 column 

see bootply