React : Stack columns when resizing window

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): enter image description here

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.

%d bloggers like this: