Gen2: Container column breakpoint controlls

An awesome enhancement to Gen2 would be to have the ability to set and adjust container columns per breakpoints: Small, Medium, Large.

Bootstrap 3 has col-xs col-sm col-md col-lg (and bootstrap 4 has a 5th, col-xl).

The default view could be Large, and all default container settings could be col-lg. Large screens - 4 column:

<div class="col-lg-3">
<div class="col-lg-3">
<div class="col-lg-3">
<div class="col-lg-3">

A selection mechanism (Small, Medium, Large) should turn the whole KEditor canvas to the max width of Small or Medium, simulating these breakpoints screen sizes. Extra small would not be required as these will just be full width.

Medium screen (3 column):

<div class="col-md-4 col-lg-3">
<div class="col-md-4 col-lg-3">
<div class="col-md-4 col-lg-3">
<div class="col-md-4 col-lg-3">

Small screen (2 column):

<div class="col-sm-6 col-md-4 col-lg-3">
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="col-sm-6 col-md-4 col-lg-3">

This would allow front end content authors better control of their content without the knowledge of bootstrap and Bootraps classes to manually adjust container column breakpoints - AND it has the added benefit and being able to visually see the screen size and how the content appears in that screen size mode.

[remcovog]

If I may add something. look at this fiddle: http://jsfiddle.net/onigetoc/ag4mgpbs/ With something like this you can make the user even more easy by dragging the column sizes, instead of using dropdowns or something. If canvas = medium, change class md-…

[ducdhm]

New option:

New UI: