中型和大型设备上为 2 x 2 矩阵，小型设备上为 4 x 1 矩阵答案

【问题标题】：2 x 2 matrix on medium and large, 4 x 1 matrix on small devices中型和大型设备上为 2 x 2 矩阵，小型设备上为 4 x 1 矩阵
【发布时间】：2019-02-05 00:48:37
【问题描述】：

我想知道如何获得以下布局。

在中型和大型设备上，我希望采用 2 行 2 列布局（2 x 2 矩阵）。

在小型（和超小型）设备上或将尺寸调整为小型时，我想要一个 4 行 1 列的矩阵。

我会用 ascii 来说明。

1) 2 x 2 矩阵（中型和大型）：

(b1)    (b2)
____________

r1c1    r1c2
r2c1    r2c2

2) 4 x 1 矩阵（小和超小）：

(b1)
r1c1
r2c1
(b2)
r1c2
r2c2

这里重要的是，当调整为小尺寸时，列和行的逐块合并。在这种情况下，一个块由每列两行组成。这由 (b1), (b2) 表示。

这种逻辑应该可以扩展到多行多列。

我可能找错树了。

一般来说，我想在图像下方对齐文本。在一个块中，第一行始终是图像，第二行始终是两端对齐的文本。

那么如何克服呢？

【问题讨论】：

标签： html css bootstrap-4 bootstrap-grid

【解决方案1】：

如果我正确理解了您的问题，最简单的解决方案是为每一列添加订单类。查看下面关于不同尺寸、PC 和移动设备的 sn-p，了解布局和顺序的差异。

编辑：我按照您的要求在小屏幕上添加了边距。

/*DEMO PURPOSE*/.col-md-6{border:1px red solid;padding:2rem}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

<section class="container-fluid">
  <div class="row">
    <div class="col-md-6 order-1 order-md-1">Row 1 Col 1</div>
    <div class="col-md-6 order-3 order-md-2">Row 1 Col 2</div>
    <div class="col-md-6 order-2 order-md-3 mb-3 mb-md-0">Row 2 Col 1</div>
    <div class="col-md-6 order-4 order-md-4">Row 2 Col 2</div>
  </div>
</section>

【讨论】：

我非常兴奋。这解释了订购比原始引导文档更多。这应该添加到他们的文档中。他们缺少基于断点的重新排序示例。
我只是将逻辑应用到我的网站，它就像一个魅力。我可以要求你再做一个小调整吗？当涉及到一列（4 行）时，如何在两个块之间动态放置一点空间（Row 2 Col 1 | | Row 1 Col 2）？ mt-* 会是这里的一个选项吗？
看来 mt-* 是水平移动而不是垂直移动
您应该将mb-* mb-md-0 类添加到第 2 行第 1 行，并且您将仅在小屏幕上留有边距。
非常完美