html - Bootstrap-具有两个div的页脚，希望它们堆叠

我试着用谷歌搜索这个问题，但我没有找到任何与我的问题相关的例子。我的问题如下：我有一个页脚（带填充）。在这个页脚中，最左边有一个文本，最右边有一个文本。
我所拥有的：当我向下缩放窗口时，最终文本会相互重叠，并且在页脚下创建一个空白区域-文本会从中掉出来。
我想要的是：在某一点上，两个div在对方的下面“堆叠”，这样文本在较小的格式上保持可读，并且不会创建额外的空白。
这是我的网站（我在BitBalloon上快速上传）：删除了链接
页脚HTML代码：

<footer>
            <div class="row footer">
                <div class="aboutMe col-xs-6" p>
                    <span class="footerName">Temp Name</span>
                    <br><br>
                    <span class="footerDev">
                        Full Stack Web Developer
                        <br><br>
                        Responsive Designs
                    </span>
                </div>


                <div class="contactMe col-xs-6">
                    <span class="footerName">Contact</span>
                    <br><br>
                    <span class="footerDev">
                        <span><i class="icon ion-email"></i><a href="mailto:[email protected]?Subject=Question%20regarding%20your%20website" target="_top"> [email protected]</a></span><br>
                        <span><i class="icon ion-android-call"></i><a href="#"> ([phone]</a></span><br>
                        <span><i class="icon ion-social-linkedin"></i><a href="#" target="_blank"> LinkedIn</a></span><br>
                        <span><i class="icon ion-social-github"></i><a href="#" target="_blank">Github</a></span><br>
                    </span>
                </div>
            </div>
        </footer>

页脚CSS代码：

.row {
    padding: 0;
    margin: 0;
}
.footer {
    height: 250px;
    padding: 50px 0;
    background-color: #1A4862;
    width: 100%;
    text-align: center;
    color: #fff;
}

.aboutMe {
    height: 100%;
    padding-top: 20px;
}

.contactMe {
    height: 100%;
    padding-top: 20px;
}

.footerName {
    font-size: 30px;
}

.footerDev {
    font-size: 20px;
}

.footer a {
    color: #fff
}

最佳答案

只需将类更改为只允许medium屏幕设备：

<footer>
    <div class="row footer">
        <div class="aboutMe col-md-6" p>
            <span class="footerName">Temp Name</span>
            <br><br>
            <span class="footerDev">
                Full Stack Web Developer
                <br><br>
                Responsive Designs
            </span>
        </div>


        <div class="contactMe col-md-6">
            <span class="footerName">Contact</span>
            <br><br>
            <span class="footerDev">
                <span><i class="icon ion-email"></i><a href="mailto:[email protected]?Subject=Question%20regarding%20your%20website" target="_top"> [email protected]</a></span><br>
                <span><i class="icon ion-android-call"></i><a href="#"> ([phone]</a></span><br>
                <span><i class="icon ion-social-linkedin"></i><a href="#" target="_blank"> LinkedIn</a></span><br>
                <span><i class="icon ion-social-github"></i><a href="#" target="_blank">Github</a></span><br>
            </span>
        </div>
    </div>
</footer>

在CSS中，请删除页脚的height：

height: 250px;

或者，如果您处于设置height的情况下，请考虑使用min-height设置它：

min-height: 250px;

关于html - Bootstrap-具有两个div的页脚，希望它们堆叠，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34458002/