Bootstrap 5与Masonry卡片打印时重叠的问题求助

各位大佬好，我现在正在尝试让Bootstrap 5和Masonry配合做一个页面，在屏幕上显示的时候一切都很正常，响应式也完美运行，各种尺寸的设备上卡片排列都没问题。但是一到打印或者打印预览的时候，卡片就直接重叠在一起了，看起来像是卡片尺寸适配不了设置的列数导致的。有没有前辈遇到过类似的情况呀？能不能帮我看看我哪里写错了？

附上我的页面代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Masonry</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js" async></script>
</head>
<body>
    <div class="container mt-4 ">
        <div class="row" data-masonry='{"percentPosition": true }'>
            <div class="col-sm-12 col-md-6 col-lg-4 mb-4">
                <div class="card">
                    <div class="card-header">Title 1</div>
                    <div class="card-body">
                        <ul>
                            <li>Stuff</li>
                            <li>More stuff</li>
                            <li>Even more stuff</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-sm-12 col-md-6 col-lg-4 mb-4">
                <div class="card">
                    <div class="card-header">Title 2</div>
                    <div class="card-body">
                        <ul>
                            <li>Stuff</li>
                            <li>More stuff</li>
                            <li>Even more stuff</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-sm-12 col-md-6 col-lg-4 mb-4">
                <div class="card">
                    <div class="card-header">Title 3</div>
                    <div class="card-body">
                        <ul>
                            <li>Stuff</li>
                            <li>More stuff</li>
                            <li>Even more stuff</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

内容来源于stack exchange