Количество товаров в строке

4 товара при разрешении экрана больше 1200px по ширине:

3 товара при разрешении экрана меньше 1200px по ширине:

Прямо над "лидерами продаж" есть 4 блока под цифрами 1,2,3,4. Пытаюсь повторить такой же трюк, чтобы при разрешении больше 1200px было 4 блока, а если меньше 1200px было 3 блока. Сделал по аналогии с товарами, но что-то пошло не так, посмотрел в css, что меняется ширина  в процентах, но как заставить при определенном разрешении применять ту или иную ширину так и понял. Вразумите, если не затруднит.

/* 3 фотографии в списке */

.productList > li{
    float:left;    
    width: 30.51317%;
    margin-right: 2.67392%;
    margin-bottom:18px;
    position:relative;
    outline: 1px solid #E8E8E8;
}

/* По 4 фотографии */

.productList > li {
    width:22.616946%;
    margin-right:2.206531%;
    outline: 1px solid #E8E8E8;
}