当其他col-6隐藏在小屏幕上时，使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断点时，带有段子元素的元素将占据整行的长度。