1.1. 2.4 横向并排：看着简单却做不出来

1.1.1. 2.4.1 三种横向并排对比

1）推荐：float:left; float:left; float:right;，在换行时设置 @media，换行宽度按实际值

注意：用 h1-h3 号字使用 float:left 时，可能会自动生成上下 padding，可以用 h4 或 p 代替

scss 文件

@media(max-width: 670px) {  
  float: left;  //让右侧的元素换行时左对齐
}

html 文件

<div class="bar2">  
  <h4>当前进度</h4>  
  <p>总共8个作业，已完成8个。</p>  
  <div class="bar">  
    <div class="percent">60%</div>  
  </div>  
</div>

2）可用（因为既用了 float 还要配合 col-md-4 等 html 代码，所以不是首选）：div.row>div.col-md-6*2，在换行时设置 @media，换行宽度应该是标准值（768px/992px） scss 文件

@media(max-width: 991px) {  
  float: left;  //让右侧的元素换行时左对齐
}

html 文件

<div class="row">  
  <div class="col-md-6">  
    <h4>当前进度</h4>  
    <p>总共8个作业，已完成8个。</p>  
  </div>  
  <div class="col-md-6">  
    <div class="bar">  
      <div class="percent">60%</div>  
    </div>  
  </div>  
</div>

3）不推荐，因为元素都在 li 层难以单独定位：ul.list-inline

1.1.2. 2.4.2 简化版如下：

<div class="row">  
  <div class="left-box" style="float: left">  
    <h1>发动啊今啊</h1>  
  </div>  
  <div class="right-box" style="float: right">  
    <h1>发动啊发啊</h1>  
  </div>  
</div>