在浏览器调整大小时清除 div 的“内容”

Question

我有三个 div

 <div class="col-md-4">
    Some content #1
 </div>
 <div class="col-md-1></div>
 <div class="col-md-6">
    Some content #2
 </div>

col-md-4 包含谷歌地图。
col-md-6 包含一个查询表格。
col-md-1 为空白。

col-md-1 的 css 是

.col-md-1{
    background: #fff;   
    background: linear-gradient(180deg, transparent, #353535, transparent);
    background-position: 65%;
    background-repeat: repeat-y;
    background-size: 1px auto;
    padding-top: 400px;
    margin-top: 45px;
    margin-left: -17px;
    height: 100%;
}

这会在 col-md-4 和 col-md-6 之间创建一个分隔符。

分隔符必须在桌面浏览器中可见。但在浏览器调整大小（低于 768 像素）时，分隔符应该消失，即不可见。

在桌面浏览器中，网站将采用这种方式。

[          ] | [            ]
[          ] | [            ]
[google map] | [enquiry form]
[          ] | [            ]
[          ] | [            ]

在移动/桌面浏览器中，网站应该是这种方式。

[google map]

[enquiry form]

只是谷歌地图和查询表格之间的空白。

但我看到了这个：

[google map]
|
|
|
|
|
[enquiry form]

我该怎么做？

Answer 1

使用最新版本的 Bootstrap，您可以在 col-md-1 div 中添加 d-none d-sm-block 类。

Reference

<div class="col-md-4">
    Some content #1
 </div>
 <div class="col-md-1 d-none d-sm-block"></div>
 <div class="col-md-6">
    Some content #2
 </div>

Answer 2

这是在当前版本的 Bootstrap 4（beta 3）中可以做到的：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">

<style>
    .col-md-1{
        background: #fff;   
        background: linear-gradient(180deg, transparent, #353535, transparent);
        background-position: 65%;
        background-repeat: repeat-y;
        background-size: 1px auto;
        padding-top: 400px;
        margin-top: 45px;
        margin-left: -17px;
        height: 100%;
    }
</style>


<div class="container">
    <div class="row">
        <div class="col-md-4">
            google map
        </div>
        <div class="col-md-1 d-none d-md-block"></div>
        <div class="col-md-6">
            enquiry form
        </div>
    </div>
</div>