title: Bootstrap 4alpha - Change logo for mobile/desktop/tablet
body: <p>I have a header using bootstrap 4 alpha</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-6 text-md-left text-center"&gt;
              &lt;div class="navbar-brand"&gt;&lt;img src="/wp-content/themes/tarps/assets/img/logo.png"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-md-6 text-md-right text-center"&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:08XXXXXXX"&gt;Ph : &lt;strong&gt;(08) XXX XXXX&lt;/strong&gt;&lt;/a&gt;
                  &lt;div class="header-address"&gt;XXXX&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want to optimize the way my logo is displayed on different screen sizes. We have a landscape version of the logo for desktop and a portrait version for mobile.</p>
  
  <p>So the best way seems to be to have two versions of the logo (logo-land and logo-port). However I'm not sure how to incorporate both logos and let bootstrap classes decide which is displayed (I guess using xs md etc).</p>
  
  <p>How would I do this? </p>