<div class="container">
  <h3>2列目に.ml-autoを設定した例</h3>
  <div class="row">
    <div class="col-sm-4">1列目<br>.col-sm-4</div>
    <div class="col-sm-4 ml-auto">2列目<br>.col-sm-4 .ml-auto</div>
  </div>

  <h3>1列目、2列目共に.ml-md-autoを設定した例（カラムはsm設定）</h3>
  <div class="row">
    <div class="col-sm-3 ml-md-auto">1列目<br>.col-sm-3 .ml-md-auto</div>
    <div class="col-sm-3 ml-md-auto">2列目<br>.col-sm-3 .ml-md-auto</div>
  </div>
  
  <h3>1列目に.mr-autoを設定した例</h3>
  <div class="row">
    <div class="col-auto mr-auto">1列目<br>.col-auto .mr-auto</div>
    <div class="col-auto">3列目<br>.col-auto</div>
  </div>
</div>

.row > [class*=col] {
    padding-top: .75rem;
    padding-bottom: .75rem;
    background-color: rgba(86,61,124,.15);
    border: 1px solid rgba(86,61,124,.2);
}
.row {
  background-color: rgba(86,61,124,.15);
}

h3 {
  margin-top: 1rem;
  font-size: 1.4em;
  text-align: center;
}

.container {
  margin-bottom: 20px;
}