响应式布局排序与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 |
-------------

我该如何制作这些"内容"呢?Section显示在小屏幕的最上方，像这样:-

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