1200.css - там в начале присутствует строка: @media screen and (min-width: 1280px) { ... }
960.css - @media screen and (min-width: 980px) and (max-width: 1280px) { ... }
720.css - @media screen and (min-width: 760px) and (max-width: 980px) { ... }

Вам необходимо обернуть ваш CSS соответствующим mediaquery конструкцией, чтобы сказать браузеру в каком случае этот CSS должен примениться.

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