CODEWITHSUNDEEP
twitter-bootstrapresponsive-designbootstrap-4
Trifex
Trifex

Reputation: 178

Bootstrap 4 - How to make elements change location based on page width?

On my contact page below the form, I have a Google Maps iframe, then a vertical line, and then a bunch of contact information all on the same line.

The vertical line is achieved by setting a right border on the column containing the Google Map, then setting padding on the right side of the left column and the left side of the right column.

Unfortunately, when I resize the page, the contact information drops down without the vertical line. What I would like to do is to make the vertical line disappear, the contact information drop down to the next line, and to create a horizontal line between the Google Map and the contact info.

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

I really have no clue how to do this, being very new to Bootstrap, so any help would be appreciated!

Thanks!

Upvotes: 0

Views: 138

Answers (1)

Nisharg Shah
Nisharg Shah

Reputation: 19572

You can do with help of media query

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

Upvotes: 1

Related Questions