title: Bootstrap - Placing element B below element A
body: <p>so confused at the moment I am trying to place a social icon below a h3 tag that is in the same bootstrap row however having a nightmare doing it.</p>
  
  <p>I am trying to create this effect:</p>
  
  <p><img src="https://i.stack.imgur.com/Wkwwn.png" alt="enter image description here"></p>
  
  <p>However I cant seem to get those icons below the phone number element when they are in the same row, they just sit on the same line.</p>
  
  <p>The logo is also in the same row as the phone number element so if I created another row and placed the icons in that row they appear to far down the page.</p>
  
  <p>Here is an example of my code:</p>
  
  <p>HTML</p>
  
  <pre><code>      &lt;div class="container hidden-sm hidden-xs"&gt;
          &lt;div class="row"&gt;
          &lt;div class="brand col-md-6 col-sm-6"&gt;&lt;img src="media/img/logo.png" alt="Driven Car Sales" class="img-rounded logo-custom"&gt;&lt;/div&gt;
          &lt;div class="phone-div col-md-6 col-sm-6"&gt;
          &lt;h3 class="phone-number"&gt;&lt;i class="glyphicon glyphicon-phone"&gt;&lt;/i&gt; 01429 7654287&lt;/h3&gt;
          &lt;img src="media/img/facebook-icon.png" alt="Facebook" class="facebook-icon"&gt;
          &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.phone-number {
      color: #fff;
      margin-top: 20px;
      display: inline-block;
      font: 600 2em 'Open Sans', sans-serif;
      float: right;
  }
  
  .facebook-icon {
      display: block;
      height: 30px;
      float: right;
  }
  
  /* main logo */
  
  .logo-custom {
      height: 75px;
  }
  
  @media only screen and (max-width : 1199px) {
      .logo-custom {
      height: 61px;
      }
  
  
  }
  </code></pre>
  
  <p>Any tips on what I might be able to do to create this effect?</p>
  
  <p>Thanks, Nick :)</p>