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 和 E 的列大小应为 8，B、C 和 D 的列大小应为 4

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>