Bootstrap 4 - Как заставить элементы менять местоположение в зависимости от ширины страницы?

Question

На моей странице контактов под формой у меня есть фрейм Google Maps, затем вертикальная линия, а затем куча контактной информации на одной строке.

Вертикальная линия достигается путем установки правой границы в столбце, содержащем карту Google, а затем установки отступов в правой части левого столбца и в левой части правого столбца.

К сожалению, когда я изменяю размер страницы, контактная информация падает без вертикальной линии. Я хотел бы сделать так, чтобы вертикальная линия исчезла, контактная информация опустилась до следующей строки и создать горизонтальную линию между картой Google и контактной информацией.

<div class="container" style="padding-top:4em">
  <h3 class="h1 text-center" style="padding-bottom:1em">Our Classroom</h3>
  <div class="row">
    <div class="col-sm" style="padding-right:1em; border-right: 1px solid #ccc;">
      <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d198741.27545049458!2d-77.15466081348372!3d38.893512762965!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89b7c6de5af6e45b%3A0xc2524522d4885d2a!2sWashington%2C+DC!5e0!3m2!1sen!2sus!4v1560167966705!5m2!1sen!2sus" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
    </div>
    <div class="col-sm" style="padding-left:20px">
      <p>address</p>
      <p>phone</p>
      <a href="mailto:email">email</a>
    </div>
  </div>
</div>

Я действительно понятия не имею, как это сделать, так как я очень новичок в Bootstrap, поэтому любая помощь будет признательна!

Спасибо!

Answer 1

Вы можете сделать с помощью медиа-запроса

@media only screen and (min-width: 992px) {
    .iframe_block {
        border-right: 1px solid #ccc;
    }
} 

@media only screen and (max-width: 992px) {
    .iframe_block {
        padding-bottom: 10px;
        border-bottom: 1px solid #ccc;
    }
}

<div class="container" style="padding-top:4em;">
    <h3 class="h1 text-center" style="padding-bottom: 1em;">Our Classroom</h3>
    <div class="row">
        <div class="col-sm iframe_block" style="padding-right:1em;">
            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d198741.27545049458!2d-77.15466081348372!3d38.893512762965!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89b7c6de5af6e45b%3A0xc2524522d4885d2a!2sWashington%2C+DC!5e0!3m2!1sen!2sus!4v1560167966705!5m2!1sen!2sus" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
        </div>
        <div class="col-sm" style="padding-left:20px">
            <p>address</p>
            <p>phone</p>
            <a href="mailto:email">email</a>
        </div>
    </div>
</div>