Bootstrap ordering panels - css

Question

I've a bootstrap website but when i want that the panels are close together like on my screenshot.
As you can see the blue panel is far away from the panel above.
I want that the panel is like the green one but... i don't get it.
Tried to use all the cols in one row but it does not work.
Here is my source code:
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-4">
<div class="panel panel-main">
<div class="panel-heading">
<h3 class="panel-title">CSS Frameworks</h3>
</div>
<div class="panel-body">
<ul class="list-unstyled">
<li>Bootstrap</li>
<li>Foundation</li>
<li>Skeleton</li>
</ul>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="panel panel-main">
<div class="panel-heading">
<h3 class="panel-title">Hulp bij programmeren</h3>
</div>
<div class="panel-body">
<ul class="list-unstyled">
<li>Stackoverflow</li>
<li>W3Schools</li>
<li>PHPTuts.nl</li>
<li>Codeschool</li>
<li>Lynda</li>
<li>Treehouse</li>
<li>CSS-Tricks</li>
</ul>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="panel panel-main">
<div class="panel-heading">
<h3 class="panel-title">Generators</h3>
</div>
<div class="panel-body">
<ul class="list-unstyled">
<li>Border radius generator</li>
<li>CSS Animation generator</li>
<li>CSS Box shadow generator</li>
<li>CSS button generator</li>
<li>CSS filter generator</li>
<li>CSS text shadow generator</li>
<li>CSS shapes generator</li>
<li>Google maps generator</li>
<li>Hash generator</li>
<li>HTML5 responsive form generator</li>
<li>Meta tag generator</li>
<li>Pricing table generator</li>
<li>QR Code generator</li>
</ul>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="panel panel-main">
<div class="panel-heading">
<h3 class="panel-title">Webdesign</h3>
</div>
<div class="panel-body">
<ul class="list-unstyled">
<li>Flat UI Colors</li>
<li>Color shades generator</li>
<li>Freeimages</li>
<li>Dribbble</li>
<li>Behance</li>
<li>Line25</li>
<li>CSS-Tricks</li>
</ul>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="panel panel-main">
<div class="panel-heading">
<h3 class="panel-title">Bootstrap</h3>
</div>
<div class="panel-body">
<ul class="list-unstyled">
<li>Download bootstrap</li>
<li>Customize and download</li>
<li>CSS</li>
<li>Components</li>
<li>JavaScript</li>
<li>Bootstrap W3schools</li>
</ul>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="panel panel-main">
<div class="panel-heading">
<h3 class="panel-title">Bootstrap</h3>
</div>
<div class="panel-body">
<ul class="list-unstyled">
<li>Download bootstrap</li>
<li>Customize and download</li>
<li>CSS</li>
<li>Components</li>
<li>JavaScript</li>
<li>Bootstrap W3schools</li>
</ul>
</div>
</div>
</div>
</div>

Answer 1

Just put the last panel block into the first .col-md-3.col-sm-4:
<div class="col-md-3 col-sm-4">
<div class="panel panel-main">
<div class="panel-heading">
<h3 class="panel-title">CSS Frameworks</h3>
</div>
<div class="panel-body">
<ul class="list-unstyled">
<li>
Bootstrap
</li>
<!-- ... -->
</ul>
</div>
</div>
<div class="panel panel-main">
<div class="panel-heading">
<h3 class="panel-title">Bootstrap</h3>
</div>
<div class="panel-body">
<ul class="list-unstyled">
<li>
Download bootstrap
</li>
<!-- ... -->
</ul>
</div>
</div>
</div>
Demo: http://plnkr.co/edit/VIzi52ziUDbm9vHuIfsk?p=preview