解决Bootstrap 5栅格布局中页脚内容折叠重叠问题

各位好！祝大家周五愉快！

为学习HTML+CSS，我正在重构就职公司的网站，复刻原版网站的工作进展十分顺利。但目前我遇到了页脚相关的问题：在小屏幕设备上，页脚内的内容出现了重叠混乱的情况。

下方图片中，(1)是期望实现的效果，(2)是当前我的页面出现的异常状态：

以下是我的代码：

CSS 代码 #

.footer {
    color: #fff;
    height: 140px;
    background: linear-gradient(180deg, #130936, #130936) no-repeat center;
    font-family: 'Open Sans', sans-serif;
}

.container {
    width: 70%;
}

p, p a {
    text-decoration:none;
    color: hsla(0, 0%, 100%, 0.72);
    letter-spacing: 0.3px;
    font-size:14px;
}

.footer-brand {
    width: 136px;
    background: url(https://i.ibb.co/zbq2q4D/pngwing-com-1.png) left center no-repeat;
    border: 0;
    text-indent: -99999px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

i {
    color: #fff;
    font-size: 30px;
    padding-left: 4px;
    padding-right: 4px;
    text-align: center;
}

HTML 代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
</head>
<body>
    <footer class="footer">
        <div class="container-md h-100">
            <div class="row align-items-center h-100 row-cols-4">
                <div class="col-3"><img class="footer-brand" src="https://i.ibb.co/zbq2q4D/pngwing-com-1.png" alt=""></div>
                <div class="col-3">
                    <p class="p1"><a href="tel:+44 (0) 700 677 1336">+44 (0) 700 677 1336</a></p>
                    <p><a href="mailto:info@jpadsolutions.com">info@companyIwork.com</a></p>
                </div>
                <div class="col-3 text-center">
                    <a href="#"><i class="bi bi-facebook"></i></a>
                    <a href="#"><i class="bi bi-twitter"></i></a>
                    <a href="#"><i class="bi bi-instagram"></i></a>
                    <a href="#"><i class="bi bi-linkedin"></i></a>
                </div>
                <div class="col-3">
                    <p>© 2022 - TheCompanyIWork Limited</p>
                </div>
            </div>
        </div>
    </footer>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>      
</body>
</html>

非常感谢您的帮助！

内容的提问来源于stack exchange，提问作者Fabio Gomes