Bootstrap Css avoid columns to stack

Question

I am using Bootstrap as CSS framework for my blog http://www.lowcoupling.com The problem is I can't see how to avoid the two columns of my to scale when reducing the width of the browser/device. I want to avoid it because of the vertical ads I have on the right side which I want to be fix in size and position. Is there any way to do this? In case this was not possible I would rather hide that column, and its content, instead of stacking it down. Is this possible?

Answer 1

Twitter Bootstrap uses a responsive design, so that as you hit certain dimension breakpoints as you resize your browser, different styles will be applied. When you narrow your browser to the point where it is optimized for tablets, you'll get a stacking behaviour.

If you add a custom class to the column, you could hide it instead of having it stack by adding this to your stylesheet:

@media screen and (max-width: 768px) {
  .my-class{
    display:none;
   }
}

As an alternative, you could also try removing all the media queries from bootstrap.css. There is a customization tool that can help you with this, but it is currently down while Bootstrap 3.0 is finalized.