Choose Layout depending on Screen Sizes

[AllanOricil]

What problem does this feature solve?

Instead of creating responsive layouts using media queries we could upgrade the layout property on pages to set the layout automatically depending on the given breakpoint.

This will make the layouts cleaner and easier to identify and maitain. Another thing is that we could configure the layout based on other properties as well, like browser name.

What does the proposed changes look like?

layout: [
{ 
maxWidth: '576px', 
name: 'small_layout'
},
{ 
maxWidth: '768px', 
name: 'medium_layout'
},
{ 
maxWidth: '992px', 
name: 'large_layout'
},
{ 
maxWidth: '1200px', 
name: 'extra_large_layout'
}
]

if only one layout is needed, the currrent layout strategy still works

layout: 'layout'