How to target a specific screen size using @media media query?

Question

I am new to responsive design, I am toying with twitter bootstrap responsive.css now. And I am encountering some trouble with my project.

The trouble is, my left column won't collapse (if that's the right term), or won't stack up. What I want is, the left column shall shift below the span8 column and resize it's width. What it does for now is, left column's width decreases and squeezing all it's contents inside it. I am targeting mobile screen size of 768x1024 media screens.

My basic markup for the layout is, span8 for the left and span4 for the right. span4 is where my other blocks is.

<div class="row">
<div class="span8">
    some block with contents
</div>

<div classs="span4">
    <div class="sideBlock"><!--fluid width was set-->
        <img src="http://placehold.it/298x77">
    </div>
</div>

My main question is, how do we target a specific screen size using media queries (using twitter bootstrap). And then customize it to fit our needs?

Answer 1

Since you are using Bootstrap, use the default variables to target specific screen sizes:

// Extra small screen / phone
$screen-xs:                  480px !default;

// Small screen / tablet
$screen-sm:                  768px !default;

// Medium screen / desktop
$screen-md:                  992px !default;

// Large screen / wide desktop
$screen-lg:                  1200px !default;

Example:

@media (min-width: $screen-sm) and (max-width: $screen-md) {
    /*
     * styles go here
     */
}