Dealing with cols and bootstrap grid - css

Question

Currently I have col-sm-5 and col-sm-7 grid on the page which looks like this
<section class="site-content site-section">
<div class="container">
<div class="row">
<div class="col-sm-5 site-block">
<table class="table table-bordered">
<tbody>
<tr>
<td><strong>test</strong></td>
<td class="text-right">test</td>
</tr>
<tr>
<td><strong>test</strong></td>
<td class="text-right">test</td>
</tr>
<tr>
<td><strong>test:</strong></td>
<td class="text-right">test</td>
</tr>
<tr>
<td><strong>test:</strong></td>
<td class="text-right">test</td>
</tr>
</tbody>
</table>
</div>
<div class="col-sm-7 site-block">
<h3 class="site-heading">
<p><strong>test </strong></p>
</h3>
<p><hr></p>
<p><strong>test</strong></p>
<div class="row">
<div class="col-sm-4">
<h3>test1</h3>
<hr>
<p><span class="glyphicon glyphicon-file"></span> test</p>
</div>
<div class="col-sm-4">
<h3>test2</h3> <hr>
<p><span class="glyphicon glyphicon-file"></span> test</p>
</div>
<div class="col-sm-4">
<h3>test3</h3>
<hr>
<p><span class="glyphicon glyphicon-file"></span> test </p>
</div>
</div>
</div>
</div>
</div>
</section>
For better understanding what is producing this grid here is the JSFIDDLE So now I want to move both col-sm-4 on the right side of site-heading in `col-sm-7. It is not so clear what I want so here is the image of that:

Answer 1

Please check this and see if is what you need. I have changed the main grid to col-sm-4 and col-sm-8 then added some inside.
<section class="site-content site-section">
<div class="container">
<div class="row">
<div class="col-sm-4 site-block">
<table class="table table-bordered">
<tbody>
<tr>
<td><strong>test</strong></td>
<td class="text-right">test</td>
</tr>
<tr>
<td><strong>test</strong></td>
<td class="text-right">test</td>
</tr>
<tr>
<td><strong>test:</strong></td>
<td class="text-right">test</td>
</tr>
<tr>
<td><strong>test:</strong></td>
<td class="text-right">test</td>
</tr>
</tbody>
</table>
</div>
<div class="col-sm-8 site-block">
<div class="row">
<div class="col-sm-6">
<h3 class="site-heading">
<p><strong>test</strong></p></h3>
<p><hr></p>
<p><strong>test</strong></p>
</div>
<div class="col-sm-4">
<h3>test</h3>
<hr>
<p><span class="glyphicon glyphicon-file"></span> test</p>
<h3>test</h3> <hr>
<p><span class="glyphicon glyphicon-file"></span> test</p>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<h3>test</h3>
<hr>
<div class="row">
<div class="col-md-3">
<div class="well">6</div>
</div>
<div class="col-md-3">
<div class="well">7</div>
</div>
<div class="col-md-3">
<div class="well">8</div>
</div>
<div class="col-md-3">
<div class="well">8</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
DEMO JSFIDDLE