Использование CSS медиа-запросов позволяет изменять стиль содержания для различных типов устройств основываясь на характеристиках устройства, таких как ширина экрана, ориентация и т.д.
Допустим, у вас есть такой CSS код:
```css
#my-div {
width: 60%;
float: right;
}
```
Если вы хотите, чтобы на мобильной версии (скажем, при ширине экрана меньше 600px), этот div занимал всю ширину экрана, вы могли бы добавить следующий медиа-запрос:
```css
@media screen and (max-width: 600px) {
#my-div {
width: 100%;
float: none;
}
}
```
В этом примере, когда ширина экрана уменьшается до 600px или меньше, ширина div становится 100%, а свойство float отключается.
Также, если вы используете какой-либо CSS фреймворк, например, Bootstrap, он имеет встроенную систему сеток, которая позволяет легко адаптировать верстку под разные размеры устройств.
Например:
```html
<div class="row">
<div class="col-md-8">Основной контент</div>
<div class="col-md-4">Боковая панель</div>
</div>
```
В этом случае, на устройствах с шириной экрана 992px и выше (md означает 'medium'), боковая панель будет располагаться справа от основного контента. На устройствах с меньшей шириной экрана оба блока будут занимать всю ширину экрана и располагаться друг над другом.