How to "toggle" CSS classes using media queries?

Question

css

How can I make it so that at a certain screen width an element uses the rules from one of its classes, and at another - from another?
(Example: in Bootstrap, for example, there are column width classes - col-xs, col-md, etc., when resizing the screen, elements use a class prefixed with the appropriate size - xs for phones, sm for tablets, etc. e.)

Answer 1

take a look at grid.less in bootstrap distribution, you will understand everything at once. If you don’t want to bother, then the easiest way is to use one class and describe different properties for each media query

Answer 2

Normally. Just specify the appropriate parameters in the CSS file. At the same time, there is even no need to dynamically change the class of blocks depending on the device, or set several classes for elements "for all occasions" (in my opinion, this is nonsense). In the first file, save the styles for the mobile version (without media ), and in the second, the styles for the rest of the devices, using the code below.
For example, you have a block with the test class on your page .

/* Смартфоны (портретный и ландшафтный режимы) */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px) {
/* Здесь задаем стили для браузеров, чья минимальная ширина - 320px, максимальная - 480px. Далее - по аналогии. */
.test {
background: black;
}
}
 
/* Смартфоны (ландшафтный режим) */
@media only screen
and (min-width: 321px) {
.test {
background: red;
}
}

/* Смартфоны (портретный режим) */
@media only screen
and (max-width: 320px) {
.test {
background: blue;
}
}
 
/* Планшеты (портретный и ландшафтный режимы) */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px) {
.test {
background: yellow;
}
}
 
/* Планшеты (ландшафтный режим) */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape) {
.test {
background: grey;
}
}
 
/* Планшеты (портретный режим) */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait) {
.test {
background: green;
}
}
 
/* Ноутбуки и ПК */
@media only screen
and (min-width: 1224px) {
.test {
background: orange;
}
}
 
/* Большие дисплеи */
@media only screen
and (min-width: 1824px) {
.test {
background: pink;
}
}