html - trying to write @media screen if screen size is 768px iPad portrait view, then right column stack down -

i designing playing around bootstrap fluid layout. here design: http://www.getaveo.com/_bootstrap4/_delete.html

i have:

span3 (gray) span6 (orange) span3 (red) 

i happen...

1 of 2) trying write @media screen if screen size 768px ipad portrait view, then:

right column, span3 (red) stack down, , becomes 100%. orange column, span6 (orange) expands on or widen on more right edge. or span6 becomes span9. left column, span3 (gray) stays same.

or becomes this:

http://www.getaveo.com/_bootstrap4/_delete2.html

2) view _delete html again...

make browser window smaller 480px wide or smaller, span stacks this:

gray orange red 

what is: if screen size iphone landscape view 480px or smaller, then, order should be:

orange gray red 

there few different ways solve this..

1] responsive utility classes

if have 1 use case entire site use .visible-tablet, .visible-phone, etc.. classes explained here. downside here heavy html, it's simple do. working example: http://www.bootply.com/60542

2] use jquery/javascript monitor window width

i'm don't mind non-css solution use jquery change classes accordingly. (you may have cross-browser issues window.width() too!) example,

if $(window).width() < 980) {

 $('#myrow').removeclass('span6').addclass('span9'); 

}; ...

3] use @media queries override bootstrap css

for example query change .row-fluid .span6 width of .row-fluid .span9 (found in bootstrap.css)

@media (max-width: 979px) , (min-width: 768px) { /*tablet*/     .row-fluid .span6 {     width: 74.46808510638297%;      } }