html - Bootstrap 4 的响应式布局排序

Question

我有一个带有 Bootstrap 布局的页面，如下所示:

<div class="row">
   <div class="col-md-6">
       content
   </div>
   <div class="col-md-6">
       content A
       content B
   </div>
</div>

所以在更大的屏幕上，它看起来像这样:-

-----------------------
| content | content A |
|         | content B |
-----------------------

但在较小的屏幕上，它看起来像这样:-

-------------
| content   |
| content A |
| content B |
-------------

我将如何让“内容 A”部分出现在小屏幕的最顶部，如下所示:-

-------------
| content A |
| content   |
| content B |
-------------

同时保持较大版本与上述相同？

Answer 1

请使用此 HTML 结构

<div class="row">
    <div class="col-md-6 d-none d-sm-none d-md-block">
        content
    </div>
    <div class="col-md-6">
        <div>
        content A
        </div>
        <div class="d-block d-sm-block d-md-none">
            content
        </div>
        <div>
        content B
        </div>
    </div>
</div>