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

Question

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

在中型和大型设备上，我希望有 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

这里重要的是，在调整为小的时候按 block 合并列和行。在这种情况下，一个 block 由每列两行组成。这由 (b1)、(b2) 表示。

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

我可能找错了树。

一般来说，我希望在图片下方网格对齐文本。在 block 中，第一行始终是图像，第二行始终是对齐的文本。

那么如何克服呢？

Answer 1

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

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

/*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>