formstrap supports the Bootstrap Grid system up to 5 levels. This allows you to create forms with layout complexity that is fit for most use-cases.
If you are new to the Bootstrap grid it is recommended you read Understanding the Grid first.
In this post, we will create a form section for an individual's address and contact information. The final form section will look like this: 
We will configure the form so that it looks like the above on large screens but changes the layout on medium and smaller screens.
The first step is to create the basic structure in the grid. Watch this video:
The video demonstrates adding 4 Section Columns to the Section. They are displayed next to one another as 4 (section) columns. The section columns were created by dragging the desired input type into the grid. Other fields were added and dragged into appropriate columns (e.g. Address was dragged to be above Postcode in the same column).
Finally, each input was given an appropriate label (the auto-height attribute was set on the Address and Social fields though this isn't shown in the video).
The next step is to set the section column widths for each breakpoint. For example, on a very small screen we probably want all fields to be stacked on top of one another as otherwise they would be too small to use. On a larger screen we have more horizontal space so the form can be displayed over numerous columns (as shown in the earlier image).
So, the next step is to select (context click) each Section Column. Section Columns are the second level of the hierarchy with the thicker right-hand border. See the first section column highlighted in this image: 
and then edit the width of each for each screen size.
| Section Column | XS | MD | XL |
|---|---|---|---|
| Address Fields | 12 | 12 | 6 |
| Phone and DOB Fields | 12 | 5 | 3 |
| Social Field | 12 | 7 | 3 |
| Email Fields | 12 | 12 | 12 |
As you will notice we are not setting SM, LG or XXL. These will be inherited (e.g. SM will inherit its value from XL, LG will inherit its value from MD and XXL will inherit its value from XXL.
The above values need to be input into the metadata form for each of the Section Columns: 
Watch this video to see how our form reacts at the various breakpoints:
In addition to setting Section Column widths you can also set Column widths - this allows for the design of very complex forms but may not be necessary for most scenarios.