Заставьте 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 точки останова.