Bootstrap 3列未正确排序

Question

我正在使用Bootstrap 3并尝试将网格堆叠在一起（A，B，C，D，E）

移动网格堆叠似乎工作正常，但主要问题是当我在桌面上查看时，网格似乎不适合它们，例如E框：

这是我的代码：

<div class="row">
   <div class="col-md-8">
    <!-- Main Hero Image -->
     <p>A</p>
   </div>

   <div class="col-md-4">
    <!-- Side Content-->
    <p>B</p>
   </div>

     <div class="col-md-4 col-md-push-8">
        <!--Music Player-->
       <p>C</p>

       <!--Upcoming Events-->
       <p>D</p>     
     </div>

    <div class="col-md-4 col-md-pull-8">
      <!--Recent Events-->
      <p>E</p>

    </div>
</div>

A＆amp; A的列大小应为8。 B，C＆amp; E的E和4号d

Answer 1

看看这个http://jsfiddle.net/C5rpV/1/ 为了更好地理解，请查看此http://codepen.io/anon/pen/fibvt

刚刚改变了

  <div class="col-md-8 col-md-pull-4">
      <!--Recent Events-->
      <p>E</p>
  </div>