如何获取引导卡列？

我正在学习Bootstrap框架，并试图制作一个两列的卡系统，以允许卡的“进给”被捕获。根据卡类型的不同，它会位于左侧或右侧列中。我将Bootstrap与我认为是12列的容器一起使用。容器内有一个6列的div和另一个6列的div，但是由于某种原因它们没有分开，所有的牌最终都是一长串牌。

此处的示例：http : //codepen.io/jasonrpan/pen/KaLRdj

<div class="container">
<div class="col-md-6">
    <div class="card">
      <div class="card-block">
        <h1 class="card-text good-review-score float-left">8.0</h1>
        <h4 class="card-title">Card on the Left 1</h4>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
      </div>
      <div class="card-footer">
        <p class="card-text text-right">Footer Text - Possible Link Out</p>
      </div>
    </div>
    <div class="card">
      <div class="card-block">
        <h1 class="card-text good-review-score float-left">8.0</h1>
        <h4 class="card-title">Card on the Left 2</h4>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
      </div>
      <div class="card-footer">
        <p class="card-text text-right">Footer Text - Possible Link Out</p>
      </div>
    </div>
</div>

<div class="col-md-6">
    <div class="card">
      <div class="card-block">
        <h1 class="card-text good-review-score float-left">8.0</h1>
        <h4 class="card-title">Card on the Right 1</h4>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
      </div>
      <div class="card-footer">
        <p class="card-text text-right">Footer Text - Possible Link Out</p>
      </div>
    </div>
    <div class="card">
      <div class="card-block">
        <h1 class="card-text good-review-score float-left">8.0</h1>
        <h4 class="card-title">Card on the Right 1</h4>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
      </div>
      <div class="card-footer">
        <p class="card-text text-right">Footer Text - Possible Link Out</p>
      </div>
    </div>
</div>

好奇为什么会这样？