html - Bootstrap 3 Overlap -

i using bootstrap 3 , these 2 grids i'm using in js fiddle demo below stack on top of each other instead of overlapping.

<div class="col-xs-12 col-md-8"> 

overlaps on

<div class="col-xs-6 col-md-4"> 

i need them stack on each other ""nav nav-pills nav-stacked" isn't hidden.

js fiddle example demo

here html code

<div class="container">     <div class="row">         <div class="col-xs-6 col-md-4">             <ul class="nav nav-pills nav-stacked" style="max-width: 300px; background-color: #fff;">                 <li class="active"> <a href="#">link1</a>                  </li>                 <li> <a href="#">link2</a>                  </li>                 <li> <a href="#">link3</a>                  </li>                 <li> <a href="#">link4</a>                  </li>             </ul>         </div>         <div class="col-xs-12 col-md-8">             <div class="rectangle_3_copy_2">                 <div class="rounded_rectangle_2"></div>             </div> 

you want stack? bootstrap docs.

don't want columns stack in smaller devices? use small , medium device grid classes adding .col-xs-* .col-md-* columns. see example below better idea of how works.

so if remove col-xs-* stack.

bootply demo