处理cols和bootstrap网格

Question

目前我在页面上有col-sm-5和col-sm-7网格，看起来像这样

<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><a href="#" class="btn btn-info btn-warning"><span class="glyphicon glyphicon-file"></span> test</a></p>
                        </div>
                        <div class="col-sm-4">
                            <h3>test2</h3> <hr>
                                 <p><a href="#" class="btn btn-info btn-warning"><span class="glyphicon glyphicon-file"></span> test</a></p>
                        </div>
                        <div class="col-sm-4">
                            <h3>test3</h3>
                            <hr>
                              <p><a href="#" class="btn btn-info"><span class="glyphicon glyphicon-file"></span> test </a></p>
                        </div>
                    </div>                                                  
            </div>
        </div>
    </div>
</section>

为了更好地理解这里产生这个网格的是JSFIDDLE所以现在我想在{col-sm-7} col-sm-4的右侧移动site-heading。我不想这么清楚，所以这里的形象是：

Answer 1

请检查一下，看看你是否需要。我已将主网格更改为col-sm-4和col-sm-8，然后在内部添加了一些。

<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><a href="#" class="btn btn-info btn-warning"><span class="glyphicon glyphicon-file"></span> test</a></p>
                        <h3>test</h3> <hr>
                        <p><a href="#" class="btn btn-info btn-warning"><span class="glyphicon glyphicon-file"></span> test</a></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