Bootstrap - responsive cards nested in a container-card

I have this markup

<div class="container-fluid p-4" style="margin-right: 0px; margin-left: 0px; margin-top: -30px;" id="divUtility" runat="server">
<div class="card bg-secondary">
<div class="card-header text-white ">
</div>
<div class="row card-body">
   <div id="divCantieri" runat="server" class="col-sm-4 bg-secondary">
   ...
   </div>
   <div id="divImporta" runat="server" class="col-sm-4 bg-secondary">
   ...
   </div>
   <div id="divBatch" runat="server" class="col-sm-4 bg-secondary">
   ...
   </div>
   <div id="divCausali" runat="server" class="col-sm-4 bg-secondary">
   ...
   </div>
</div>
</div>
</div>

The problem I'm facing is that the nested cards inside the big one are not responsive, so when I use the site on desktop I see them on the same row one after each other, if I use the smartphone I see them still inline but shrinked. When on smartphone I want them to display as they are a single column. How can I achieve this? Thanks

example drawing

actual graphic

EDIT: With this markup I'm almost where I want, last thing to figure out is how to set all the inner cards always adapting to the available horizontal space in both cases: basically when they are on a single row they should have width=33% each, but when on a single column width=100%.

<div id="divUtility" class="container-fluid p-4" style="margin-right: 0px; margin-left: 0px; margin-top: -30px;">
            <div class="card bg-secondary">
                <div class="card-header text-white ">
                ...
                </div>
                <div class="card-body" style="display:flex; flex-direction:row; flex-wrap:wrap;">
                        <div id="divCantieri" class="card mr-3 mt-2 mb-2" style="min-width:30em;">
                            <div class="card-header bg-light">
                             ...
                            </div>
                            <div class="card-body scroll" style="max-height: 10em;">
                            ...
                            </div>
                        </div>
                        <div id="divImporta" class="card mr-3 mt-2 mb-2" style="min-width:30em;">
                            <div class="card-header bg-light">
                             ...
                            </div>
                            <div class="card-body scroll" style="max-height: 10em;">
                             ...
                            </div>
                        </div>
                        <div id="divBatch" class="card mr-3 mt-2 mb-2" style="min-width:30em;">
                            <div class="card-header bg-light">
                             ...
                            </div>
                            <div class="card-body scroll" style="max-height: 10em;">
                             ...
                            </div>

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

I ended up with this and it's working well, as wanted

<div class="card-body">
                    <div class="row">
                        <div id="divCantieri" runat="server" class="col-xl-4 mb-3">
                            <div class="card">
                                <div class="card-header bg-light">
                                </div>
                                <div class="card-body scroll" style="max-height: 10em;">
                                </div>
                            </div>
                        </div>
                        <div id="divImporta" runat="server" class="col-xl-4 mb-3">
                        <div class="card">
                                <div class="card-header bg-light">
                                </div>
                                <div class="card-body" style="max-height: 10em;">
                                </div>
                            </div>
                        </div>
                        <div id="divBatch" runat="server" class="col-xl-4 mb-3">
                            <div class="card">
                                <div class="card-header bg-light">
                                </div>
                                <div class="card-body scroll" style="max-height: 10em;">
                                </div>
                                <div class="card-footer">
                                </div>
                            </div>
                        </div>
                        <div id="divCausali" visible="false" runat="server" class="col-xl-4 mb-3">
                            <div class="card">
                                <div class="card-header bg-light">
                                </div>
                                <div class="card-body scroll" style="max-height: 10em;">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>