Bootstrap panels not aligned as I wish

Question

I am using Bootstrap for my webpage and having trouble with aligning panels. I have many panels not all in the same size and they do not align as I would like them to do. I would like to have panel three directly below panel 1. .

my page

<div class="container">
<div class="col-md-6 pull left">
 <div class="panel panel-warning">
  <div class="panel-heading"><h3 class="panel-title">1</h3></div>
  <div class="panel-body">
   <div class="list-group">
    <a href="#" class="list-group-item">App 1</a>
    <a href="#" class="list-group-item">App 1_2</a>
    
   </div>
  </div>
 </div>
</div> 
<div class="col-md-6 pull left">
 <div class="panel panel-danger">
  <div class="panel-heading"><h3 class="panel-title">2</h3></div>
  <div class="panel-body">
   <div class="list-group">
    <a href="#" class="list-group-item">App 2</a>
    <a href="#" class="list-group-item">App 2_3</a>
    <a href="#" class="list-group-item">App 2_4</a>
    <a href="#" class="list-group-item">App 2_5</a>
    <a href="#" class="list-group-item">App 2_6</a>
    <a href="#" class="list-group-item">App 2_7</a>
    <a href="#" class="list-group-item">App 2_8</a>
        
   </div>
  </div>
 </div>
</div> 
</div>
<div class="container">
<div class="col-md-6 pull left">
 <div class="panel panel-success">
  <div class="panel-heading"><h3 class="panel-title">3</h3></div>
  <div class="panel-body">
   <div class="list-group">
    <a href="#" class="list-group-item">App 3</a>
    <a href="#" class="list-group-item">App 3_1</a>
    
   </div>
  </div>
 </div>
</div> 
</div>