title: Bootstrap 4 center header elements on mobile
body: <p>Here is my header setup (bootstrap 4):</p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;div class="row"&gt;
  &lt;div class="col-md-6"&gt;
    &lt;div class="navbar-brand"&gt;&lt;img src="..."&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="col-md-6 text-right"&gt;
    &lt;div class="header-btn-grp"&gt;
    &lt;div class="header-call-us"&gt;Get a Quote, Call Today!&lt;/div&gt;
    &lt;a role="button" class="btn btn-danger btn-lg header-btn" href="tel:123"&gt;Ph : &lt;strong&gt;...&lt;/strong&gt;&lt;/a&gt;
    &lt;div class="header-address"&gt;XXX&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>As expected on desktop the logo sits on the left and the button sits on the right.</p>
  
  <p>When on smaller devices I would like the logo and button to align in the center.</p>
  
  <p>I have tried to add a  <code>.text-md-center</code> class to both columns but this caused both elements to center in there columns at all widths (desktop and mobile).</p>
  
  <p>What is the correct way to do this?</p>