Почему не отрабатывает @media?

Question

[mx6001]

Пишу

@media (max-width: 768px) {
    .col-main-text {
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media (max-width: 1024px) {
    .col-main-text {
        padding-left: 30px;
        padding-right: 30px;
    }
}

@media (max-width: 1280px) {
    .col-main-text {
        padding-left: 40px;
        padding-right: 40px;
    }
}

Хочу чтоб для каждого размера был свой padding, но на деле получается что он берет 1280 и тупо применяет его ко всем размерам. Вроде как бы логично, ведь остальное меньше 1280, но вес 1024 при 1024 должен же быть больше. Приходится писать для каждого варианта который находится не первым и не последним:

@media (min-width: ОТ) and (max-width: ДО) {...}

Я что то не так делаю или может есть другой вариант как сделать короче?

Answer 1

[Алексей Зуев]

Порядок поменяйте. У вас в случае ширины 600 все условия подходят, поэтому последний и затирает предыдущие