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.
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
2 Likes