我正在使用 React-Bootstrap 开发一个元素。我有一个部分，在移动/xs View 上，应如下所示:
红色方 block 是切换按钮，蓝色方 block 是当前显示的图像。
当在更大的屏幕上查看时，我想更改顺序，以便第一行 3 个红色方 block 堆叠成一列并 float 到左侧，第二行红色方 block 也堆叠成一列并 float 到右边，蓝色方 block 在中间，像这样:
如何使用 Bootstrap 实现此功能？我知道 Bootstrap 是建立在 Flexbox 之上的，我需要使用 flex 属性吗？我是 Flexbox 新手。理想情况下，我想在不使用 Flexbox 的情况下实现这一点。有没有办法使用 Bootstrap 的偏移量来做到这一点？
在大屏幕上将红色方 block (最初在移动 View 上设置为行)更改为列，然后将蓝色方 block 放在中间时遇到了困难。
最佳答案
您可以使用带有断点的.order实用程序:https://getbootstrap.com/docs/4.0/layout/grid/#order-classes
因此图像(蓝色方 block )将使用 class="order-lg-2 order-3" 这样它就可以切换是否在大屏幕上定位第二(992px) code>+) 或任何较小的第三个。
要解决“旋转”问题，我认为最简单的方法是将包含组件设为 Flex 容器，然后使用 Flex 方向断点。容器最终将具有类“d-flex flex-lg-row flex-column”。 d-flex 只是将组件声明为 Flexbox 容器。 flex-lg-row 和 flex-column 告诉 Bootstrap 在大屏幕上设置水平排列在行中的元素，并在<中设置垂直排列的元素em>列较小的列(如果包含顺序断点，即可达到您想要的效果)。
您还需要对各个红框行执行类似的操作。
除了 flexbox 之外，我没有看到任何其他方法可以(轻松)旋转它。您可以玩这个有趣的游戏(也免费)来帮助巩固 Flexbox 的不同部分:https://mastery.games/p/flexbox-zombies .
关于html - Bootstrap : Rearranging rows into columns and changing the order of elements，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57518895/