How to collapse a given block in bootstrap?

Question

css

Tried it like this:

<div class="container">
            <div class="row">
                <div class="col-md-12 blocks">

                        <div class="stats_header">
                            <h2 class="stats_title">Стрижка у нас <br>
                                это выгодно!</h2>
                            <p class="stats_intro">
                                Мужская стрижка требует точного подхода.
                                Обратимся к статистике:
                            </p>

                            <small class="stats_legend">
                                <sup>*</sup> — приведённые данные ложь
                            </small>
                        </div>


                        <div class="block-table">
                            <table class="table mytable">

                                <tbody>
                                <tr>
                                    <th scope="row"></th>
                                    <td>Mark</td>
                                    <td>Otto</td>

                                </tr>
                                <tr>
                                    <th scope="row"></th>
                                    <td>Jacob</td>
                                    <td>Thornton</td>

                                </tr>
                                <tr>
                                    <th scope="row"></th>
                                    <td>Larry</td>
                                    <td>the Bird</td>

                                </tr>
                                </tbody>
                            </table>
                        </div>


                </div>


            </div>
        </div>

However, in this case, the meaning of the framework is lost, since the width of the stats_header (320px), block-table (640px) blocks was set manually.
Further adaptation of blocks to different device extensions with this approach will be done manually - by redefining the latitude of the elements.
Again, the meaning of Bootstrap is lost.
Another variant

<div class="container">
            <div class="row">
  <div class="col-md-4">
           <div class="stats_header"></div>
</div>
  <div class="col-md-8 ">
<div class="block-table"></div>
</div>

If through col-md-4 to the stats_header block and col-md-8 to the block-table block, then margins between cols that are absent in the layout are naturally obtained.
How to properly layout this block on Bootstrap?
I will be grateful for your advice!

Answer 1

Col 3 on the left, Col 9 on the right
Inside Col9 new row with four Col 6

Answer 2

.col-4
.col-4
  .col-12
  .col-12
.col-4
  .col-12
  .col-12