title: Bootstrap - Center row content below certain breakpoint
body: <p>I have the following grid system in bootstrap v4:</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-sm-auto align-self-center"&gt;
              &lt;img src="test" class="logo img-responsive"&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-auto align-self-center"&gt;
              &lt;table class="table-responsive"&gt;
                  &lt;tbody&gt;
                      &lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This should have the image side-by-side with the table for screens larger than 'small' and stack them for screens smaller. This works perfectly.</p>
  
  <p>Currently, everything is left-justified. I would like the row to be left justified when the columns are side-by-side (screen > "small"), but to be centred when the columns are stacked (screen &lt; "small").</p>
  
  <p>I have tried adding justify-content-center to the row, but this centres both configurations (until the screen reaches extra small, at which point it once again left-justifies...)</p>
  
  <p>Not particularly helpful (because the screen is always small) fiddle: <a href="https://jsfiddle.net/aq9Laaew/133123/" rel="nofollow noreferrer">https://jsfiddle.net/aq9Laaew/133123/</a></p>