# Настройка контента для различных экранов

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

<figure><img src="https://3865113055-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDNAf78MjCvzZdPg7TdO%2Fuploads%2Fn3IyX25450VeiXAKsEm3%2FScreenshot_10.png?alt=media&#x26;token=5223b81c-1ba6-4db9-8b93-f4de9a64f9e8" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3865113055-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDNAf78MjCvzZdPg7TdO%2Fuploads%2FlrM00vcrKr7Ew2XfYPT6%2F%20-%20Google%20Chrome%202024-04-11%2016-27-53.gif?alt=media&#x26;token=8f0905ac-9530-45ed-b1b0-40edd1bab8f2" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3865113055-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDNAf78MjCvzZdPg7TdO%2Fuploads%2FDmjRRYHz0M3rh70txjCR%2F%20-%20Google%20Chrome%202024-04-11%2016-34-00.gif?alt=media&#x26;token=dd9da436-aa9d-4f8c-a5b4-dd1c8de03308" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Настройки для веб,  планшетов и мобильных устройств хранятся отдельно и не влияют друг на друга; другими словами, вы можете создать уникальный дизайн для каждой версии.
{% endhint %}

При переключении **на версию для планшета или мобильного** устройства **строки и колонки** получают **дополнительные настройки: "Порядок" и "Направление".**

Эти настройки очень полезны для управления тем, как контент выглядит на маленьких экранах, и позволяют изменять порядок элементов:

### Направление

Определяет направление для колонок или строк. Установив настройку направления, вы можете контролировать последовательность отображения элементов и групп элементов на экране выбранного устройства.

<figure><img src="https://3865113055-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDNAf78MjCvzZdPg7TdO%2Fuploads%2FYbCODRmwDKSdwza2Ezsv%2F%20-%20Google%20Chrome%202024-04-11%2016-45-24.gif?alt=media&#x26;token=21a8f757-bbbf-4058-a696-a87b36bc80bc" alt=""><figcaption></figcaption></figure>

### Порядок

Порядок определяет последовательность вложенных колонок или строк. Установив значение в свойстве порядок, вы можете контролировать порядок, в котором вложенные строки/колонки появляются на экране.

<figure><img src="https://3865113055-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDNAf78MjCvzZdPg7TdO%2Fuploads%2Fiv3YEgAh1KSpzvzEUL3X%2F%20-%20Google%20Chrome%202024-04-11%2017-00-19.gif?alt=media&#x26;token=5ef1722f-42f1-4d4f-a7ff-6faf7e459d08" alt=""><figcaption></figcaption></figure>

### Скрыть

Скрыть — это еще одна полезная настройка колонки для мобильных экранов (хотя она доступна и для веб-версий), которая прячет колонку вместе с контентом внутри. Это позволяет скрывать/показывать разные  элементы на любом экране.

<figure><img src="https://3865113055-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDNAf78MjCvzZdPg7TdO%2Fuploads%2FSaszr5h20cvfeDyIYiaV%2F%20-%20Google%20Chrome%202024-04-11%2017-08-12.gif?alt=media&#x26;token=44fd2cf5-090d-4a1c-9c34-5a09814e6771" alt=""><figcaption></figcaption></figure>