v class="col-9 bg-danger"></div> <!--allocate 4 spaces for this-->
        <div class="col-3 bg-primary"></div><!--allocate 4 spaces for this-->
        <div class="col-12 bg-primary"></div><!--allocate 12 spaces for this, eventually because there is no space at the current row this will use a new row-->
    </section>

    <section class="row"> <!--col spaces 12-->
        <div class="col-1"></div>
        <div class="col-1"></div>
        <div class="col-1"></div>
        <div class="col-1"></div>
       