ㄧ.響應式佈局

<div id="demo" class="container">
  <div class="row">
    <div class="col-12 col-sm-6 col-lg-3"><span>1</span></div>
    <div class="col-12 col-sm-6 col-lg-3"><span>2</span></div>
    <div class="col-12 col-sm-6 col-lg-3"><span>3</span></div>
    <div class="col-12 col-sm-6 col-lg-3"><span>4</span></div>
  </div>
</div>


#demo.container{
  background: #054db1;
  color: white;
  height: 100vh;
}

#demo.container .row{
  background: #021d51;
  border-bottom: 1px solid #000;
  height: 30vh;
}

#demo.container .row > .col-12 > span,
#demo.container .row > .col-sm-6 > span,
#demo.container .row > .col-lg-3 > span{
  display: block;
  background: #487dbb;
  color: white;
  font-size: 32px;
  padding: 8px;
  border: 1px solid #021d51;
}

重點：
1.在手機的螢幕row裡面的col為12格，平板螢幕為6格，電腦螢幕為3格
2.col各個螢幕的尺寸
.col為最小螢幕通常為手機螢幕，也就是<576px
.col-sm為小螢幕為平板螢幕，也就是 ≥576px
.col-md為中螢幕的大平板，≥992px
.col-lg為大螢幕的電腦，也就是 ≥992px
.col-xl為超大螢幕的電腦，≥1200px

codepen
參考：bootstrap4