<div class="container">
  <h3>sm(小サイズ)では列の間に空欄を設け、<br>md(中サイズ)では空欄をなくした例</h3>
  <div class="row">
    <div class="col-sm-5 col-md-6">1列目<br>
      .col-sm-5 .col-md-6</div>
    <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">2列目<br>.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
  </div>

  <h3>md(中サイズ)では列の間に空欄を設け、<br>lg(大サイズ)では空欄をなくした例</h3>
  <div class="row">
    <div class="col-sm-6 col-md-5 col-lg-6">1列目<br>.col-sm-6 .col-md-5 .col-lg-6</div>
    <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">2列目<br>.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</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;
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.3/css/bootstrap.css

External JavaScript

This Pen doesn't use any external JavaScript resources.