Bootstrap4 混合使用栅格系统，兼容移动设备

在Bootstrap4中，col-可以混合使用，同时定义在不同设备上的宽度。

示例：

<div class="container">
  <p>混合使用，兼容不同宽度的设备</p>
  <!-- 在移动设备上（宽度较小），第一个是全宽度的列，第二个是半宽度的列，在PC上（大显示器）就是一行，第一个占8/12，第二个占4/12 -->
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>
  <!-- 在移动设备上（宽度较小），全是50%的宽度，在PC上，全是4/12宽度 -->
  <div class="row">
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>
  <!-- 在移动设备和PC上全部都是6/12的宽度 -->
  <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
</div>