Align content to center on small device, Bootstrap 4

Question

I have a simple Bootstrap 4 row:

<div class="container">
  <div class="row">
      <div class="col-md-12 p-2">
          <img class="" src="../assets/img/Logo-small.png" alt="">
      </div>            
  </div>

I want that whenever I view it on small device (col-sm-12), the image should be centered, but on large device (col-md-12) it should be left aligned.

Answer 1

Use responsive margins on the image..

<div class="container">
    <div class="row">
        <div class="col-md-12 p-2">
            <img class="d-block mx-auto mx-md-0" src="//placehold.it/200" alt="">
        </div>
    </div>
</div>

https://www.codeply.com/go/U63JXeFRrE

Or, responsive text align on the col...

<div class="container">
    <div class="row">
        <div class="col-md-12 text-center text-md-left p-2">
            <img class="" src="//placehold.it/200" alt="">
        </div>
    </div>
</div>

https://www.codeply.com/go/U63JXeFRrE

Read about the Bootstrap util classes: http://getbootstrap.com/docs/4.1/utilities