I'm trying to implement bootstrap like row's and columns where the rows component can have column components as childs. The column component dialog should be able to have dynamic width sizes set by the author (25%, 33%, 50%).
In order for me to dynamically set the column width's I would have to add it to the top level element (div class='column') but I'm not sure how to do this.
You can create a select dropdown in dialog with different column value (starting from 1 up to 12) for mobile, tablet and desktop (if required). Else it can be done only for desktop.
Now you can write a sling model which will read the dialog value and send it as a list to HTL. In HTL you can iterate over the list and add the required number of columns inside row which will be driven dynamically based on the dialog selection.