当其他col6隐藏在小屏幕上时，使col-6占据整行

Question

我目前使用的是两个专栏

<div class="col-6">
  <p>
   paragraph text goes here
  </p>
</div>

<div class="col-6 d-none d-sm-block">
  <img class="goal-f1 rounded" src="img/rubbish.jpg">
</div>

包含图像的列被设置为在小屏幕上隐藏，我想知道当列隐藏时，是否有可能让另一列占据整行？

现在，它只是在图像曾经所在的地方留下了一个巨大的空白。

Answer 1

只需添加响应列类：

<div class="col-12 col-sm-6">
  <p>paragraph text goes here</p>
</div>    
<div class="col-6 d-none d-sm-block">
  <img class="goal-f1 rounded" alt="rubbish.jpg" src="img/rubbish.jpg">
</div>

如下所示，每当视区小于sm断点时，具有子段落的元素将采用整行的长度。