Best approach to divide Bootstrap grid columns

Question

I have divided my Bootstrap grid columns following way.

<div class="container-fluid">
    <div class="row">
        <div class="col-md-3">A</div>
        <div class="col-md-6">
            <div class="col-md-12">B1</div>
            <div class="col-md-12">
                <div class="col-md-8">B1.1</div>
                <div class="col-md-4">B1.2</div>
            </div>
            <div class="col-md-12">
                <div class="col-md-10">B2.1</div>
                <div class="col-md-2">B2.2</div>
            </div>
        </div>
        <div class="col-md-3">C</div>
    </div>
</div>

Please find below of visual layout of this code.

Is my approach of dividing grid columns correct or wrong?

Answer 1

Always wrap your column inside a row to avoid any css break when resizing/or something like that

<div class="container-fluid">
    <div class="row">
        <div class="col-md-3">A </div>

        <div class="col-md-6">B
            <div class="row">
                <div class="col-md-12">B1</div>
            </div>
            <div class="row">
                <div class="col-md-8">B1.1</div>
                <div class="col-md-4">B1.2</div>
            </div>
            <div class="row">
                <div class="col-md-10">B2.1</div>
                <div class="col-md-2">B2.2</div>
            </div>
        </div>

        <div class="col-md-3">C </div>
    </div>
</div>