Резиновая верстка блоками

Есть:

<div class="wrapper">
    <article></article>
    <article></article>
    <article></article>
</div>

.wrapper {
    width: 960px;
    margin: 15px auto;
}

article {
    float: left;
    width: 300px;
    background: #FFF;
}

Не могу понять, как сделать, чтобы разрешение экрана меньше 960px - колонки становились бы не по три, как сейчас, а по две и резиновыми. И так до определенного разрешения, а потом в одну.

@media screen and (max-width:960px) {

}