Html 如何在不重叠于胸带的情况下浮动div

我一直在使用这个模板：，来开发这个：它在屏幕和平板电脑上工作得非常完美，但是当它调整到手机大小时，它非常混乱，因为屏幕仍然分为两半，而且不方便（无法正确地看到内容），所以我想在地图之后浮动文本，就像它只是一页一样（但只限于电话）

这是目前为止的代码：

<div class="container-fluid" id="main">
    <div class="row">
        <div class="col-xs-6" id="left">

            ....all whole text and images...

        </div>
        <div class="col-xs-6" id="map"></div>
    </div>
</div>

我该怎么做呢？每次我尝试一些东西时，两个div都会相互重叠！！

您可以使用它来获得更好的性能。例如

如果您想在平板电脑、台式机、笔记本电脑和大屏幕上显示某些内容，请使用

<p class="visible-sm visible-md visible-lg"> some text</p>

<p class="visible-xs"> some text</p>

一些文本

如果您想在移动设备上显示一些文本，请使用

<p class="visible-sm visible-md visible-lg"> some text</p>

<p class="visible-xs"> some text</p>

一些文本

使用上述参考资料，您可以根据需要编辑/修改css

希望这能帮助你