Наследование классов css, возможно ли?

Question

[Лев К]

Всем привет. Может конечно можно решить задачку и проще, но я вижу такой вариант развития событий.
Есть форма с 2 полями и кнопка, я использую purecss фреймворк. Для desktop версии мне нужны одни классы для полей (поля расположены горизонтально относительно друг друга). Для мобильной другие (чтобы поля были друг над другом - вертикально). Нашел что можно при помощи media находить какой клиент и это хорошо, но классы разные. Хотел бы сделать что-то типа :

@media screen and (max-width: 32em)	{
    .hide-b {
        display: none; !important;
    }
    .main-input-q : .pure-input-1-1;
    .main-input-l : .pure-input-1-1;
}

@media screen and (min-width: 32em) {
    .hide-s {
        display: none; !important;
    }
    .main-input-q : .pure-input-1-3;
    .main-input-l : .pure-input-1-4;
}

В общем отнаследовать классы, чтобы на форме не писать несколько полей и некоторые скрывать в зависимости от устройства. Возможно ли это или же можно проще ?

Answer 1

[Егор Живагин]

Что делает класс pure-input ? Наверняка, в зависимости от цифр в конце задаётся ширина, правильно? Тогда можно в media просто поменять ширину этому объекту

Самое красивое решение - контейнеру display: flex;
Тогда в media можно будет просто написать : flex-direction: column и элементы встанут вертикально

Answer 2

[WQP]

Только через js. В CSS нельзя такое сделать. Хотя через препроцессоры можно удобно переписывать области кода с медиа запросами