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

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
     */
}