Building a responsive 2-column layout
Learn how to build a responsive 2-column section that resizes according to the browser size and stacks on smaller tablet/mobile devices.
- Ensure that you have applied Autolayout to the section with 2 child layers
![](/docs/image-7515@2x.png)
- For these 2 child layers to resize accordingly to the parent section, set their width constraint to “Fill container”
![](/docs/image-7516@2x.png)
Stack the items vertically on smaller devices
-
Select the 2-column Autolayout frame and tag it as a container
-
Click on the Styling & Layout tab
-
Click on the 768px tab and change the layout direction from horizontal to vertical
![](/docs/column-section/image3.png)
- You have successfully created a responsive 2-column layout