javascript - Change Bootstrap column class attribute based on screen size/media query -

i using twitter's bootstrap , have problem. using grid system , in html have used col-lg-6 class create 2 different columns equal width. see code below:

<div class="row"> <div class="row sameheightcols">         <div class="col-lg-6">             <div class="contentblock">                 <h3>header</h3>             </div>         </div>         <div class="col-lg-6">             <h3>header2</h3>         </div>     </div> </div> 

the issue having when hits screen size breaks , of content in left block disappears. occurs when screen size between col-lg , col-md. to change classes @ screen size changes this.

<div class="col-lg-9">     <div class="contentblock">       <h3>header</h3>     </div> </div> <div class="col-lg-3">      <h3>header2</h3> </div> 

is possible in css media query? or need use javascript? appreciated have done lot of research , cannot find solution. please let me know if further code/info required.

thanks.

paul fitzgerald, hi there. wanting change 6x6 when lg... 9x3 @ md ?

if have @ fiddle.

resize window. not want stack let know.

<div class="container">      <div class="row text-center">         <div class="col-md-9 col-lg-6 block1"><h2>header 1</h2></div>         <div class="col-md-3 col-lg-6 block2"><h2>header 2</h2></div>         </div>     </div>  

the screenshot below shows change when resized lg 6x6 md 9x3.

added post

paul, think wanting here, have new media breakpoint between md , lg.

in screenshot below added text show when using lg , xlg , md.

here fiddle.

hope gets started how want this.