Html 如何让两个引导卡并排使用媒体查询来响应？

引导程序4的媒体查询，无响应。我有两张卡片并排放在一个部分。当我开始使用

576px

时，我希望能够并排显示卡

我已尝试将父容器设置为

float:none

和

float:left

。还尝试在查询中合并

display:block

<section id="recipeList">
    <div class="recipeName"></div>
    <div class="row">
        <div class="col-sm-6">
            <div class="card image-container">
                <img class="card-img-top" src="./assets/images/Dish.svg" 
                    alt="places restaurants png">
                <div class="card-body ingredients" id="foodImage">
                    <p class="card-text"></p>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="card ingredients-card">
                <img class="card-img-top" 
                    src="./assets/images/Contents.svg" alt="places restaurants png">
                <div class="card-body overflow-auto">
                    <h2 class="card-title"></h2>
                    <p class="card-text overflow-auto" id="facts"></p>
                </div>
            </div>
        </div>
    </div>
</section>

---

我希望这两张引导卡能够响应，而不仅仅是向下挤压

使用col-6类而不是col-sm-6类仍然不起作用，列表一直在下降..看到了吗：我调整了那个框的大小，它做了与html相同的事情。它始终保持相同的长度，但这会将文本向外延伸。我不想那样。我在寻找它漂浮在另一个上面。