Съдържанието в една уеб страница се разпределя в блокови елементи, които се подреждат в редове и колони.

Във версиите за мобилни устройства тези елементи намаляват ширината си, подреждат се един под друг или не са активни.

Видео материалите например не се пускат автоматично.

Има различни начини за подредба на сдържането. Най-широко разпространеният случай е подредбата в колони.

Ако дадена информация е подредена в 3 отделни колони, разпределени хоризонтално, те ще се стеснят при по-ниски резолюции (например при таблет). В един момент, за да не се сплескат твърде много ще се подредят вертикално едно под друго, като заемат цялата ширина на екрана (пример: за телефон).

По съшия начин колоните, се подреждат една под друга при по-ниски резолюции. Поради тази причина е важно да се подреди съдържанието в колоните по правилния начин.

Ето как би изглеждала подредбата на блоковете, ако са само в две колони, но имат последователност, която трябва да се запази и за мобилна версия.

В разгледания случай ще създадем съдържание в две и три колони, за да видим как се разпределя за различни резолюции.

1. В билдъра добавете сектор/row с две колони. Двете колони имат опции за стилизиране и в тях може да се добавят различни модули с бутон +      
2. Добавете сектор с три колони в следващия ред. 
3. Създайте съдържание, което да поместите в колоните чрез модул Box. 
4. Добавете модул за заглавие над колоните. Този модул ще изпълни целият ред, т.е. една колона 
5. Всеки модул box е оцветен с различен цвят, за да се отличават за примера 

Проверка на мобилни версии през браузъра

1. В Chrome или Firefox браузър натиснете десен бутон на мишката и изберете опция Inspect/ Изследване на елемента 
2. Кликнете на иконата за визуализации на различни резолюции 
3. Изберете устройство и резолюция, която да прегледате 
4. Разгледайте разположението на колоните – те се стесняват за сметка на височината си
   

   

5. Изберете малко мобилно устройство (в примера iPhone), за да видите как се разпределят колоните вертикално една под друга.