Bootstrap：将行重新排列为列并更改元素的顺序
Bootstrap: Rearranging rows into columns and changing the order of elements
我正在使用 React-Bootstrap 开发一个项目。我有一个部分，在 mobile/xs 视图中，应该如下所示：
红色方块是切换按钮，蓝色方块是当前显示的图片。
在更大的屏幕上查看时，我想更改顺序，让第一行的 3 个红色方块堆叠成一列并向左浮动，第二行的红色方块也堆叠成一列并向左浮动向右浮动，蓝色方块在中间，像这样：
如何使用 Bootstrap 实现此功能？我知道 Bootstrap 是建立在 Flexbox 之上的，我需要使用 flex 属性 吗？我是 Flexbox 的新手。理想情况下，我想在不乱用 Flexbox 的情况下实现它。有什么方法可以使用 Bootstrap 的偏移量来做到这一点吗？
在大屏幕上将红色方块（最初在移动视图中设置为行）更改为列，然后让蓝色方块位于中间时遇到困难。
您可以使用带断点的 .order 实用程序：https://getbootstrap.com/docs/4.0/layout/grid/#order-classes
因此图像（蓝色方块）将使用 class="order-lg-2 order-3"，因此它可以切换是在大屏幕上排在第 2 位 (992px+) 还是在任何较小的屏幕上排在第 3 位。
要修复 'rotating'，我认为最简单的做法是让包含组件成为一个弹性容器，然后使用弹性方向断点。容器最终将具有 类 "d-flex flex-lg-row flex-column"。 d-flex 只是将组件声明为 flexbox 容器。 flex-lg-row 和 flex-column 告诉 bootstrap 设置在大屏幕上 行 水平方向和 列垂直方向的项目 较小的（如果包含顺序断点，可实现您想要的效果）。
您还需要对各个红框行执行类似的操作。
除了 flexbox 之外，我看不到任何其他方式可以（轻松地）旋转它。你可以玩这个有趣的游戏（也免费）来帮助巩固 flexbox 的不同部分：https://mastery.games/p/flexbox-zombies.
我正在使用 React-Bootstrap 开发一个项目。我有一个部分，在 mobile/xs 视图中，应该如下所示：
红色方块是切换按钮，蓝色方块是当前显示的图片。
在更大的屏幕上查看时，我想更改顺序，让第一行的 3 个红色方块堆叠成一列并向左浮动，第二行的红色方块也堆叠成一列并向左浮动向右浮动，蓝色方块在中间，像这样：
如何使用 Bootstrap 实现此功能？我知道 Bootstrap 是建立在 Flexbox 之上的，我需要使用 flex 属性 吗？我是 Flexbox 的新手。理想情况下，我想在不乱用 Flexbox 的情况下实现它。有什么方法可以使用 Bootstrap 的偏移量来做到这一点吗？
在大屏幕上将红色方块（最初在移动视图中设置为行）更改为列，然后让蓝色方块位于中间时遇到困难。
您可以使用带断点的 .order 实用程序：https://getbootstrap.com/docs/4.0/layout/grid/#order-classes
因此图像（蓝色方块）将使用 class="order-lg-2 order-3"，因此它可以切换是在大屏幕上排在第 2 位 (992px+) 还是在任何较小的屏幕上排在第 3 位。
要修复 'rotating'，我认为最简单的做法是让包含组件成为一个弹性容器，然后使用弹性方向断点。容器最终将具有 类 "d-flex flex-lg-row flex-column"。 d-flex 只是将组件声明为 flexbox 容器。 flex-lg-row 和 flex-column 告诉 bootstrap 设置在大屏幕上 行 水平方向和 列垂直方向的项目 较小的（如果包含顺序断点，可实现您想要的效果）。
您还需要对各个红框行执行类似的操作。
除了 flexbox 之外，我看不到任何其他方式可以（轻松地）旋转它。你可以玩这个有趣的游戏（也免费）来帮助巩固 flexbox 的不同部分：https://mastery.games/p/flexbox-zombies.