Bootstrap 列未出现在较小的屏幕上

Question

I developed a grid with 3 columns. My problem is that the columns shrink too much and do not present the content correctly when they are adjusted in smaller sizes.

Is there a way to implement a break-point, so that when the screen measurement of approximately 1000px arrives, pass all the content to a single column?

The other problem arises when I reach the mobile size, the last two columns (highlighted in the image) disappear. These should appear under the first column

How can I solve my problem and what did I do wrong?

DEMO

Code

<div class="container-fluid"
    style="overflow-x:hidden;padding-left:0;display:flex; height: 98vh; margin-right:0px; margin-left:0px">
    <div class="col-md-6 col-sm-12 customcol">
        <div class="card card1">
            <div class="card-body">
                <p class="card-text">1asdas</p>
            </div>
        </div>
        <div class="divh" style="justify-content: flex-start; display: flex">
            <div class="card card2">
                <div class="card-body">
                    <p class="card-text">2aasasddsd</p>
                </div>
            </div>
            <div class="card card2">
                <div class="card-body">
                    <p class="card-text">3asd</p>
                </div>
            </div>
        </div>
        <div class="divh" style="justify-content: flex-start; display: flex">
            <div class="card card2">
                <div class="card-body">
                    <p class="card-text">4asdasd</p>
                </div>
            </div>
            <div class="card card2">
                <div class="card-body">
                    <p class="card-text">5asda</p>
                </div>
            </div>
        </div>
        <div class="divh" style="justify-content: flex-start; display: flex">
            <div class="card card4" style="height:100%">
                <div class="card-body">
                    <p class="card-text">6asda</p>
                </div>
            </div>
            <div class="card card4" style="height:100%">
                <div class="card-body">
                    <p class="card-text">7asd</p>
                </div>
            </div>
            <div class="card card4" style="height:100%">
                <div class="card-body">
                    <p class="card-text">8asdasd</p>
                </div>
            </div>
            <div class="card card4" style="height:100%">
                <div class="card-body">
                    <p class="card-text">9asdsad</p>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6 col-sm-12 customcol">
        <div class="card card1">
            <div class="card-body">
                <p class="card-text">10asd</p>
            </div>
        </div>
        <div class="card card1">
            <div class="card-body">
                <p class="card-text">11asdas</p>
            </div>
        </div>
    </div>
    <div class="col-md-6 col-sm-12 customcol">
        <div class="card cardall">
            <div class="card-body">
                <p class="card-text">12asd</p>
            </div>
        </div>
    </div>
</div>

Problem

Answer 1

The issue is you are using col without row .

When ever you need to use column there must be some row as its parent its define in official doc of Bootstrap

 .card{ margin-top: 16px; margin-left: 16px; } .card-body{ padding:4px; } .card1{ height: calc(50% - 16px) } .divh{ height: calc(16.7% - 16px); margin-top: 16px; } .card2{ width: calc(50% - 16px); margin-top:0px; height:100%; } .card4{ width: calc(25% - 16px); margin-top:0px; height:100%; } .cardall{ height: calc(100% - 16px) } .customcol{ padding-left: 0; padding-right: 0; }

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container-fluid" style="padding-left:0; height: 98vh;"> <div class="row"> <div class="col-md-4 col-sm-12 customcol"> <div class="card card1"> <div class="card-body"> <p class="card-text">1asdas</p> </div> </div> <div class="divh" style="justify-content: flex-start; display: flex"> <div class="card card2" > <div class="card-body"> <p class="card-text">2aasasddsd</p> </div> </div> <div class="card card2"> <div class="card-body"> <p class="card-text">3asd</p> </div> </div> </div> <div class="divh" style="justify-content: flex-start; display: flex"> <div class="card card2"> <div class="card-body"> <p class="card-text">4asdasd</p> </div> </div> <div class="card card2"> <div class="card-body"> <p class="card-text">5asda</p> </div> </div> </div> <div class="divh" style="justify-content: flex-start; display: flex"> <div class="card card4" style="height:100%"> <div class="card-body"> <p class="card-text">6asda</p> </div> </div> <div class="card card4" style="height:100%"> <div class="card-body"> <p class="card-text">7asd</p> </div> </div> <div class="card card4" style="height:100%"> <div class="card-body"> <p class="card-text">8asdasd</p> </div> </div> <div class="card card4" style="height:100%"> <div class="card-body"> <p class="card-text">9asdsad</p> </div> </div> </div> </div> <div class="col-md-4 col-sm-12 customcol"> <div class="card card1"> <div class="card-body"> <p class="card-text">10asd</p> </div> </div> <div class="card card1"> <div class="card-body"> <p class="card-text">11asdas</p> </div> </div> </div> <div class="col-md-4 col-sm-12 customcol"> <div class="card cardall"> <div class="card-body"> <p class="card-text">12asd</p> </div> </div> </div> </div> </div>

Answer 2

 .card{ margin-top: 16px; margin-left: 16px; } .card-body{ padding:4px; } .card1{ height: calc(50% - 16px) } .divh{ height: calc(16.7% - 16px); margin-top: 16px; } .card2{ width: calc(50% - 16px); margin-top:0px; height:100%; } .card4{ width: calc(25% - 16px); margin-top:0px; height:100%; } .cardall{ height: calc(100% - 16px) } .customcol{ padding-left: 0; padding-right: 0; }

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container-fluid" style="padding-left:0; height: 98vh;"> <div class="row"> <div class="col-md-4 col-sm-12 customcol"> <div class="card card1"> <div class="card-body"> <p class="card-text">1asdas</p> </div> </div> <div class="divh" style="justify-content: flex-start; display: flex"> <div class="card card2" > <div class="card-body"> <p class="card-text">2aasasddsd</p> </div> </div> <div class="card card2"> <div class="card-body"> <p class="card-text">3asd</p> </div> </div> </div> <div class="divh" style="justify-content: flex-start; display: flex"> <div class="card card2"> <div class="card-body"> <p class="card-text">4asdasd</p> </div> </div> <div class="card card2"> <div class="card-body"> <p class="card-text">5asda</p> </div> </div> </div> <div class="divh" style="justify-content: flex-start; display: flex"> <div class="card card4" style="height:100%"> <div class="card-body"> <p class="card-text">6asda</p> </div> </div> <div class="card card4" style="height:100%"> <div class="card-body"> <p class="card-text">7asd</p> </div> </div> <div class="card card4" style="height:100%"> <div class="card-body"> <p class="card-text">8asdasd</p> </div> </div> <div class="card card4" style="height:100%"> <div class="card-body"> <p class="card-text">9asdsad</p> </div> </div> </div> </div> <div class="col-md-4 col-sm-12 customcol"> <div class="card card1"> <div class="card-body"> <p class="card-text">10asd</p> </div> </div> <div class="card card1"> <div class="card-body"> <p class="card-text">11asdas</p> </div> </div> </div> <div class="col-md-4 col-sm-12 customcol"> <div class="card cardall"> <div class="card-body"> <p class="card-text">12asd</p> </div> </div> </div> </div> </div>