Offset Samples

Window Width :

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

<div class="container">
  <div class="row">
    <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
    <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
  </div>

Extra smal (<576px):積み重ねて表示
Small (≥576px):.offset-sm-2 でオフセット2列分
Medium (≥768px):.offset-md-0 でオフセット解除
Large (≥992px):.offset-md-0 でオフセット解除
Extra large (≥1200px):.offset-md-0 でオフセット解除

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-md-5 col-lg-6">.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">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
  </div>
</div>

Extra smal (<576px):積み重ねて表示
Small (≥576px):2列で表示
Medium (≥768px):offset-md-2 でオフセット2列分
Large (≥992px):offset-lg-0 でオフセット解除
Extra large (≥1200px)::offset-lg-0 でオフセット解除