Html 引导分页溢出父div取决于分辨率，如何缩小或换行？

我使用boostrap4主题进行分页，当我以比显示器更小的分辨率加载页面时，我遇到了一个问题，即分页超过了父div，导致查看效果不好

以下是我的示例代码：

<div class="col-12 col-md-6 col-lg-3">
    <h3 class="text-capitalize">Devices</h3>
    <ul id="pager_device" class="pagination-sm mt-1 pagination"><li class="page-item first disabled"><a href="#" class="page-link">First</a></li><li class="page-item prev disabled"><a href="#" class="page-link">Previous</a></li><li class="page-item active"><a href="#" class="page-link">1</a></li><li class="page-item"><a href="#" class="page-link">2</a></li><li class="page-item"><a href="#" class="page-link">3</a></li><li class="page-item"><a href="#" class="page-link">4</a></li><li class="page-item next"><a href="#" class="page-link">Next</a></li><li class="page-item last"><a href="#" class="page-link">Last</a></li></ul>
    <div id="pager_content_device">

        <div class="col-12 results item active">
            <div class="pt-4 border-bottom">
                <a class="page-url h4 text-primary" href="/config/device_details/460/118/">US-EDGE</a>
                <p class="page-description mt-1 text-muted"> Location: US <br> Serial: XXX <br> Version: 1<br> Install Date: 01/01/2019</p>
            </div>
        </div>

        <div class="col-12 results item">
            <div class="pt-4 border-bottom">
                <a class="page-url h4 text-primary" href="/config/device_details/5/1/">UK-EDGE</a>
                <p class="page-description mt-1 text-muted"> Location: UK <br> Serial: XXX <br> Version: 1<br> Install Date: 01/01/2019</p>
            </div>
        </div>
    </div>
</div>

装置

位置：美国序列号：XXX版本：1安装日期：2019年1月1日

位置：英国序列号：XXX版本：1安装日期：2019年1月1日

下面是一些针对手机或iPad进行测试时的屏幕截图

对一部手机来说，col的宽度是12，你可以看看是否离开col

在iPad的分辨率上看多个Col是一堆重叠的分页器 您可以使用此代码

你好，世界！
身体{
保证金：0；
}
标页码

代码的哪一部分使分页器保持在div内？我抄袭了ul课程，但没有什么不同