我正在使用 React-Bootstrap 开发一个项目。我有一个部分，在 mobile/xs 视图上应该如下所示：
红色方块是切换按钮，蓝色方块是当前显示的图像。
在大屏幕上查看时，我想更改顺序，使第一行 3 个红色方块堆叠成一列并浮动到左侧，第二行红色方块也堆叠成一列并浮动到右边，蓝色方块在中间，像这样：
如何使用 Bootstrap 实现这一点？我知道 Bootstrap 是建立在 Flexbox 之上的，我需要使用 flex 属性吗？我是 Flexbox 的新手。理想情况下，我想在不乱用 Flexbox 的情况下实现这一点。有没有办法可以使用 Bootstrap 的偏移量来做到这一点？
在大屏幕上很难将红色方块（最初在移动视图上设置为行）更改为列，然后让蓝色方块位于中间。
【问题讨论】：
标签： html css twitter-bootstrap responsive-design flexbox
您可以使用带有断点的.order 实用程序：https://getbootstrap.com/docs/4.0/layout/grid/#order-classes
因此图像（蓝色方块）将使用class="order-lg-2 order-3"，因此它可以切换它是在大屏幕上（992px+）定位在第二位还是在任何更小的屏幕上定位在第三位。
要修复“旋转”问题，我认为最简单的方法是让包含组件成为 flex 容器，然后使用 flex 方向断点。容器最终将拥有 "d-flex flex-lg-row flex-column" 类。 d-flex 只是将组件声明为 flexbox 容器。 flex-lg-row 和 flex-column 告诉引导程序将项目设置为在大屏幕上水平放置在 行 中，在较小屏幕上垂直放置在 列 中（实现您的效果）如果您包含订单断点，则在之后）。
您还需要对各个红色框行执行类似的操作。
除了 flexbox 之外，我没有看到任何其他（轻松）旋转它的方法。你可以玩这个有趣的游戏（也免费）来帮助巩固 flexbox 的不同部分：https://mastery.games/p/flexbox-zombies。
【讨论】：