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

我目前正在处理两个专栏

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

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

---

现在，它只是在图像原来的位置留下了一个巨大的空白。

只需添加响应列类：

<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断点时，带有段落子元素的元素将采用整行的长度