FormLayout explanation

Hi all

FormLayout in flow it is a bit confusing about how to layout components. ResponsiveSteps and setColspan are powerful but I cannot make them to work.
I think there would be a good idea to have a tutorial with multiple examples to explain them.

I would like to represent the following with FormLayout or any other way.
As you can see about panel with title 1 there are 3 columns where field6 has span of three columns.
Panel with title 2 is placed in three columns with multiple rows.
Panel with title 3 has 4 columns.
Moreover titles can be like span label fields. Notice that at their right the have a label with popup info.

|title 1-------------------------------------------------------?-|
|----field1[        ]
-----field2[      ]
------field3[       ]
----|
|----field4[        ]
-----field5[      ]
-------------------------|
|----field6[                                                ]
----|
|----field7[        ]
-----field8[      ]
------field9[       ]
----|
|title 2-------------------------------------------------------?-|
|table-----------------------------------------------------------|
|                                                                |
|                                                                |
|                                                                |
|                                                                |
|title 3-------------------------------------------------------?-|
|----field10[  ]
---field11[   ]
---field12[   ]
---field13[   ]
----|

Thank you

Nick