Bootstrap 4 Bootstrap 4移动分辨率中的内容重叠

我是一个使用bootstrap 4的乞丐，我也在努力打造一个在手机上运行良好的网站，但我似乎不知道如何在不重叠的情况下使用fontawesome图标。我尝试过将语法更改为col，但效果不会更好。我也尝试过在论坛中查找，但似乎找不到我问题的一般答案

我的代码：

<div class="container-fluid">
        <div class="row">
            <div class="col-2"></div>
            <div class="col-8 bg-dark text-white rounded">
                lorem ipsum
            </div>
            <div class="col-2"></div>
        </div>
        <div class="row">
            <div class="col-2"></div>
            <div class="col-1">
                <i class="fas fa-comment-dots fa-3x"></i>
            </div>
            <div class="col-7">
                <div class="row">
                    Discussão Geral
                </div>
                <div class="row">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a libero in odio rutrum pellentesque. Nullam condimentum aliquet nunc id maximus.
                </div>
            </div>
            <div class="col-2"></div>
        </div>
    </div>```

乱数假文
讨论圣杰拉尔
Lorem ipsum dolor sit amet，是一位杰出的献身者。莫里斯是奥迪奥·鲁特鲁姆·佩伦茨克的自由人。Nullam调味品aliquet nunc id maximus。
```

我已将代码粘贴在此链接中，请检查并告知我

它似乎已修复，但错误是什么？是因为col语法吗？