Columns with breakpoints for different sized screens

Is it possible to create a layout using Row and Col elements that change on screen size, similar to how Bootstrap does it with col-sm, col-lg, etc?
I would like to have a page that displays as two columns on a large screen (eg. iPad, laptop) but one column on small (eg. phone).
I’ve looked through the documentation, but can’t see an option for it?
I’m using Framework7-React.

I think Grid / Layout Grid quite similiar to Bootstrap

1 Like

Yes, the column sizes on the grid allow you to change the column widths based on screen size, but won’t collapse the column down if the screen size is below a certain width…
This is an example of what I’m after:

I want to be able to show content in two columns if the screen size => 768px, and in one column, with the content stacked above one another if the screen size is =< 767px.

So after doing a little research on flex, it seems like I could engineer something that would work using flex-wrap?
I’m not that familiar with CSS however, so it might not be pretty!
Is there anything that exists already in F7 that does this? If not, I might have a go at making something myself and contributing it?
Any suggestions on where to start/look in the existing code?

<div class="col-100 medium-50">...</div>
<div class="col-100 medium-50">...</div>

Will show 2 cols on screen width > 768 and one below each other with less screen width

1 Like