Как настроить таргетинг на определенный размер экрана с помощью медиазапроса @media?

Я новичок в адаптивном дизайне, сейчас я играю с twitter bootstrap responsive.css. И я столкнулся с некоторыми проблемами с моим проектом.

Проблема в том, что мой левый столбец не свернется (, если это правильный термин ), или не сложится. Я хочу, чтобы левый столбец сместился ниже столбца span8 и изменил его ширину. Что он делает на данный момент, так это то, что ширина левого столбца уменьшается и сжимает все его содержимое внутри него. Я ориентируюсь на размер мобильного экрана 768x1024 медиаэкранов.

Моя основная разметка для макета: span8 для левого и span4 для правого. span4 - это место, где находятся мои другие блоки.

<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>

Мой главный вопрос заключается в том, как нам настроить таргетинг на определенный размер экрана с помощью медиа-запросов (с помощью начальной загрузки Twitter ). А затем настроить его под наши нужды?