Bootstrap面板没有按照我的意愿对齐

Question

我正在使用Bootstrap作为我的网页，并且无法对齐面板。 我有许多面板不是全部都在相同的尺寸，他们没有像我希望他们那样对齐。 我希望面板3直接位于面板1下面。

my page

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;