Bootstrap 3 - Displaying multiple panels side by side

Question

So I have a website running on Bootstrap 3 and having a bit of an issue getting a panel to line up exactly like I want it to. At the bottom is how it looks now.

What I want is for that last panel on the bottom left to move up to fit beneath the top left panel, but I am not sure how to go about it doing it. It must be something simple that I am missing. Any advice is greatly appreciated. Thanks!

My jFiddle

<div class="row">
      <div class="col-xs-12 col-sm-6">
        <div class="panel panel-primary">
          <div class="panel-heading">Test</div>
          <div class="panel-body">Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.</div>
        </div>
      </div>
      <div class="col-xs-12 col-sm-6">
        <div class="panel panel-primary">
          <div class="panel-heading">Test</div>
          <div class="panel-body">Test Content</div>
        </div>
      </div>
      <div class="col-xs-12 col-sm-6">
        <div class="panel panel-primary">
          <div class="panel-heading">Test</div>
          <div class="panel-body">Test Content</div>
        </div>
      </div>
      <div class="col-xs-12 col-sm-6">
        <div class="panel panel-primary">
          <div class="panel-heading">Test</div>
          <div class="panel-body">Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.</div>
        </div>
      </div>
      <div class="col-xs-12 col-sm-6">
        <div class="panel panel-primary">
          <div class="panel-heading">Test</div>
          <div class="panel-body">Test Content</div>
        </div>
      </div>
    </div>

Answer 1

I believe you want each column to have the col-md-6 class rather than each subitem.

<div class="row">
  <div class="col-xs-12 col-sm-6">
    <!-- Left column panels -->
  </div>

  <div class="col-xs-12 col-sm-6">
    <!-- Right column panels -->
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <div class="col-xs-12 col-sm-6">

    <div class="panel panel-primary">
      <div class="panel-heading">Test</div>
      <div class="panel-body">
        Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a
        lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test
        Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with
        a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.
      </div>
    </div>

    <div class="panel panel-primary">
      <div class="panel-heading">Test</div>
      <div class="panel-body">Test Content</div>
    </div>

  </div>

  <div class="col-xs-12 col-sm-6">
    <div class="panel panel-primary">
      <div class="panel-heading">Test</div>
      <div class="panel-body">Test Content</div>
    </div>

    <div class="panel panel-primary">
      <div class="panel-heading">Test</div>
      <div class="panel-body">Test Content</div>
    </div>


    <div class="panel panel-primary">
      <div class="panel-heading">Test</div>
      <div class="panel-body">
        Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some
        stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.</div>
    </div>

    <div class="panel panel-primary">
      <div class="panel-heading">Test</div>
      <div class="panel-body">Test Content</div>
    </div>
  </div>

</div>

Answer 2

You need to put the last panel under the first one, in the same column :

<div class="row">
    <div class="col-xs-12 col-sm-6">
        <div class="panel panel-primary">
            <div class="panel-heading">Test</div>
            <div class="panel-body">Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.</div>
        </div>
        <div class="panel panel-primary">
            <div class="panel-heading">Test</div>
            <div class="panel-body">Test Content</div>
        </div>
    </div>
    <div class="col-xs-12 col-sm-6">
        <div class="panel panel-primary">
            <div class="panel-heading">Test</div>
            <div class="panel-body">Test Content</div>
        </div>
    </div>
    <div class="col-xs-12 col-sm-6">
        <div class="panel panel-primary">
            <div class="panel-heading">Test</div>
            <div class="panel-body">Test Content</div>
        </div>
    </div>
    <div class="col-xs-12 col-sm-6">
        <div class="panel panel-primary">
            <div class="panel-heading">Test</div>
            <div class="panel-body">Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.</div>
        </div>
    </div>
</div>