如何为移动屏幕、中等屏幕设置引导列

Question

中屏幕

|-----(1)||-----(2)|

手机屏幕

1. x

|---------------(2)|
|-----(1)|

在第一个场景中，(1)和(2)在单行中具有相同的列大小，而在第二个场景(1)和(2)中，

<div class="row">
<h3 class="col-7 col-md-6" >(1)</h3>
<h3 class="col-12 col-md-6" >(2)</h3>
</div>

但是在第二个场景(移动屏幕)中，我遇到了设置列的困难，有人能帮我做第二个场景吗？

Answer 1

编辑过的

Flex是解决方案:)

您可以使用flex属性来简化它，它们一开始有点棘手，但非常有效。

示例

​

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="m-5">
  <h2>Option</h2>
  <div class="w-50 d-flex flex-column-reverse flex-md-row">
    <h3 class="col-7 col-md-6 border border-dark">(1)</h3>
    <h3 class="col-12 col-md-6 border border-dark">(2)</h3>
  </div>
</div>

​