<h3>2分割列の設定</h3>
<div class="container">
  <div class="row">
    <div class="col">
      2つの列の1列目<br>.col
    </div>
    <div class="col">
      2つの列の2列目<br>.col
    </div>
  </div>
</div>

<h3>3分割列の設定（sm以上）</h3>
<div class="container">
  <div class="row">
    <div class="col-sm">
      3つの列の1列目<br>.col-sm
    </div>
    <div class="col-sm">
      3つの列の2列目<br>.col-sm
    </div>
    <div class="col-sm">
      3つの列の3列目<br>.col-sm
    </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);
}

h3 {
  text-align: center;
  margin-top: 1rem;
}