Bootstrap 3 grid row span

I'm trying to make a grid based on bootstrap only I need 1 div to span 3 rows. I've added a picture below inclusive the code I used. For the main grid I used a generator but now I get stuck.

The div which says REMOVE I added as a dummy and need to be removed. only when I do that the div with MOST READ will move to the right and closes the gap. What I'm trying to achieve is that COMMENTS - SITE FEED will span 3 rows (vertically downwards) next to, in the spot light, quiz/poll and most read.

How can I do this with wrapping some stuff so it not move and shift anymore :-)

enter image description here

<div class="container">
<div class="row">
    <div class="col-md-12">col-md-12 - MARQUE</div>
</div>
<div class="row">
    <div class="col-md-8">col-md-8 - CAROUSEL</div>
    <div class="col-md-4">col-md-4 - MY STUFF</div>
</div>
<div class="row">
    <div class="col-md-12">col-md-12 - 5 ARTICLES</div>
</div>
<div class="row">
    <div class="col-md-6">col-md-6 - LOCAL NEWS</div>
    <div class="col-md-6">col-md-6 - SEGMENTS NEWS</div>
    <div class="col-md-6">col-md-6 - COUNTRY NEWS</div>
    <div class="col-md-6">col-md-6 - TWITTER</div>
</div>
<div class="row">
    <div class="col-md-3">col-md-3 - BLOG</div>
    <div class="col-md-3">col-md-3 - IN SPOT LIGHT</div>   
    <div class="col-md-6">col-md-6 - - COMMENTS - SITE FEED</div>  
    <div class="col-md-3">col-md-3 - STEEL FABRIC</div>
    <div class="col-md-3">col-md-3 - QUIZ/POLL</div>
    <div class="col-md-6">col-md-6 - remove !!!!</div>
    <div class="col-md-6">col-md-6 - MOST READ</div> 
</div>
<div class="row">
    <div class="col-md-3">col-md-3 - UNDETER 1</div>
    <div class="col-md-3">col-md-3 - UNDETER 2</div>
    <div class="col-md-3">col-md-3 - UNDETER 3</div>
    <div class="col-md-3">col-md-3 - SHAREHOLDER</div>
</div>
<div class="row">
    <div class="col-md-12">col-md-12 - QUICK ACCESS</div>
</div>