Bootstrap rawspan and column span - html

Question

Can anybody help me with this problem, I am using bootstrap to develop my website and so far I have two row`s.
<section role="main">
<div class="container">
<div class="row no-space"><!-- Row 1 -->
<div class="span3">
<h2>{ logo here }</h2>
<h3>[ logo here ]</h3>
</div>
<div class="span6">
<h2>Text here, text here <em>text here</em>...</h2>
<h2>text here!</h2>
</div>
<div class="span3">
<img src="img/coffee.png" alt="Coffee and code">
</div>
</div><!-- /Row 1 -->
<div class="row no-space"><!-- Row 2 -->
<div class="span3">
<img src="img/code01.png" alt="Coda2 code">
</div>
<div class="span3">
<img src="img/code01.png" alt="Coda2 code">
</div>
</div><!-- /Row 2-->
</div><!-- Container -->
</section><!-- MAIN -->
The entire website will be built using span3 and 6, with a height of 220 for span3 and 460 for span6. Because span6 has a double height as against span 3, it will be a gap of 240px between the span3 from the first row and the first span3 from the secound row.
How I can remove this gap, I tried nesting but is not really something that I need, because the divs(span3) will be shuffled every time the website will be reloaded.
Thank you for your time and help.

Answer 1

I think what u want to do is think of the spans as columns and add the data inside of the columns
<section role="main">
<div class="container">
<div class="row no-space"><!-- Row 1 -->
<div class="span3">
<h2>{ logo here }</h2>
<h3>[ logo here ]</h3>
<img src="img/code01.png" alt="Coda2 code">
</div>
<div class="span6" data-rowspan="2" data-colspan="2">
<h2>Text here, text here <em>text here</em>...</h2>
<h2>text here!</h2>
</div>
<div class="span3">
<img src="img/coffee.png" alt="Coffee and code">
<img src="img/code01.png" alt="Coda2 code">
</div>
</div><!-- /Row 1 -->
</div><!-- Container -->