bootstrap cards get shrink in a single row when resize in small and medium screen

Question

I am new to front end and struggling when resizing the screen .

I am using 4 cards(Performance,Quality,Availability,Availability) in a card-group class and wants to place two cards in a row when screen is on medium and 1 card in a row when screen is on small .

Below is my code

        <div class="row">
        <div class="card-group col-lg-8 col-md-12 col-sm-12">
            <div class="card mb-4 mr-2 ml-2">
                <div class="card-header">
                    <h4 class="mb-0">Performance</h4>
                </div>
                <div class="card-body">
                    <a href="LineOverview.aspx" class="stretched-link"></a>
                    <div id="gauge1"></div>
                </div>
            </div>
            <div class="card mb-4 mr-2 ml-2">
                <div class="card-header">
                    <h4 class="mb-0">Quality</h4>
                </div>
                <div class="card-body">
                    <div id="gauge2"></div>
                </div>
            </div>
            <div class="card mb-4 mr-2 ml-2">
                <div class="card-header">
                    <h4 class="mb-0">Availability</h4>
                </div>
                <div class="card-body">
                    <div id="gauge3"></div>
                </div>
            </div>
            <div class="card mb-4 mr-2 ml-2">
                <div class="card-header">
                    <h4 class="mb-0">OEE
                    </h4>
                </div>
                <div class="card-body">
                    <div id="gauge4" style="text-align: center"></div>
                    <div id="dvLabel" style="text-align: center; position: absolute; top: 52%; right: 48%; font-size: 25px">
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4 col-md-12 col-sm-12">
            <div class="card mb-4 mr-2" style="height: 119px">
                <div class="card-header mt-4">
                    <h4 class="mb-0">Breakdown Hours</h4>
                </div>
                <div class="card-body ml-3 mr-3 text-center" style="background-color: #FFFFFF; color: #081A51; height: 50%">
                    <div>
                        <h3 class="mb-0"><%= Breakdown_Hours %></h3>
                    </div>
                </div>
            </div>
            <div class="card mb-4 mr-2" style="height: 119px">
                <div class="card-header mt-4">
                    <h4 class="mb-0">MTBF</h4>
                </div>
                <div class="card-body ml-3 mr-3 text-center" style="background-color: #FFFFFF; color: #081A51; height: 50%">
                    <div>
                        <h3 class="mb-0"><%= MTBF %></h3>

                    </div>
                </div>
            </div>
            <div class="card mb-4 mr-2" style="height: 119px">
                <div class="card-header mt-4">
                    <h4 class="mb-0">MTTR</h4>
                </div>
                <div class="card-body ml-3 mr-3 text-center" style="background-color: #FFFFFF; color: #081A51; height: 50%">
                    <div>
                        <h3 class="mb-0"><%= MTTR %></h3>

                    </div>
                </div>
            </div>
        </div>
    </div>

It is looking like this in a small screen

wherein I wanted to have these 4 cards placed below one other on small screen and 2 cards in case of medium. I am struggling to find the missing link .

Answer 1

Your second group misses the card-group class. Add it and the last three cards will be positioned side by side. If you want them be aligned with the ones on first row, you can just insert and empty card.