html - Bootstrap：将行重新排列为列并更改元素的顺序

Question

我正在使用 React-Bootstrap 开发一个项目。我有一个部分，在 mobile/xs 视图上，应该如下所示：

红色方块是切换按钮，蓝色方块是当前显示的图像。

在大屏幕上查看时，我想更改顺序，使第一行 3 个红色方块堆叠成一列并浮动到左侧，第二行红色方块也堆叠成一列并浮动到右侧，蓝色方块在中间，像这样：

如何使用 Bootstrap 实现这一点？我知道 Bootstrap 是建立在 Flexbox 之上的，我需要使用 flex 属性吗？我是 Flexbox 的新手。理想情况下，我想在不乱用 Flexbox 的情况下实现这一点。有没有办法可以使用 Bootstrap 的偏移量来做到这一点？

在大屏幕上将红色方块（最初在移动视图上设置为行）更改为列然后让蓝色方块位于中间时很难。

标签： htmlcsstwitter-bootstrapresponsive-designflexbox

Answer 1

您可以使用.order带有断点的实用程序：https ://getbootstrap.com/docs/4.0/layout/grid/#order-classes

所以图像（蓝色方块）将使用class="order-lg-2 order-3"它可以切换它是在大屏幕（992px+）上定位第二还是在任何更小的屏幕上定位第三。

要修复“旋转”，我认为最简单的方法是让包含组件成为 flex 容器，然后使用 flex 方向断点。容器最终会拥有 classes "d-flex flex-lg-row flex-column"。只是将d-flex组件声明为一个 flexbox 容器。flex-lg-row并flex-column告诉引导程序将项目设置为在大屏幕上水平排列，在较小屏幕上垂直排列（如果包含订单断点，则实现您想要的效果）。

您还需要对各个红色框行执行类似的操作。

除了 flexbox 之外，我看不到任何其他方式来（轻松地）旋转它。你可以玩这个有趣的游戏（也免费）来帮助巩固 flexbox 的不同部分：https ://mastery.games/p/flexbox-zombies 。