2×2矩阵上大中,在小型设备上4×1矩阵

问题描述 投票:1回答:1

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

关于中型和大型设备我想有一个2行和2列布局(2×2矩阵)。

上小的(和额外的小的)设备或调整到小的情况下,我想有一个4行和一个的矩阵。

我会通过ASCII说明吧。

1)2×2矩阵(中和大):

(b1)    (b2)
____________

r1c1    r1c2
r2c1    r2c2

2)4×1点矩阵(小型和超小型):

(b1)
r1c1
r2c1
(b2)
r1c2
r2c2

这里最重要的是,调整到很小的时候列和行的块明智合并。在这种情况下的块是做出来每一个列两行的。这是通过(B1),(B2)表示。

这样的逻辑应扩展为多行和列。

我可能会找错了树。

总的来说,我想下面的图像网格对齐文本。在一个块中的第一行总是图像,第二行总是对齐文本。

那么如何克服呢?

html5 css3 bootstrap-4 bootstrap-grid
1个回答
1
投票

如果我理解正确你的问题,最简单的解决方案是增加订单班为每列。看看下面的代码片段的大小不同,个人电脑和移动,看到在布局和顺序的差异。

编辑:我添加利润率小屏幕上你的要求。

/*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>
© www.soinside.com 2019 - 2024. All rights reserved.