I am trying to manage my containers in react so that they move nicely when the user is reducing his window's size. One thing I would like to manage, is to allow some components placed on the same row to stack upon each other if the window is reduced.
More precisely, let's say I have the following render, with 12 containers that fill the entire page :
<div class="row">
<div class="col-1">.col-1</div>
<div class="col-1">.col-1</div>
<div class="col-1">.col-1</div>
<div class="col-1">.col-1</div>
<div class="col-1">.col-1</div>
<div class="col-1">.col-1</div>
<div class="col-1">.col-1</div>
<div class="col-1">.col-1</div>
<div class="col-1">.col-1</div>
<div class="col-1">.col-1</div>
<div class="col-1">.col-1</div>
<div class="col-1">.col-1</div>
</div>
Result (fits the whole screen):
What I am trying to do is to stack the containers on the right when the user decreases the size of the window. Is there a simple way to do this?
Thank you
Read more here: https://stackoverflow.com/questions/65721377/react-stack-columns-when-resizing-window
Content Attribution
This content was originally published by Thomas at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.