css - React：调整窗口大小时堆叠列

Question

我正在尝试管理我的容器以做出反应，以便在用户减小窗口大小时它们可以很好地移动。我想管理的一件事是，如果窗口缩小，则允许放置在同一行上的一些组件相互堆叠。

更准确地说，假设我有以下渲染，有 12 个容器填满整个页面：

        <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>

结果（适合整个屏幕）：

我要做的是在用户减小窗口大小时将容器堆叠在右侧。有没有一种简单的方法可以做到这一点？

谢谢

标签： cssreactjscontainersreact-bootstrap