我正在练习自助式响应式网页开发，当我更改宽度时，我设法使我的网页响应相当，但如果我垂直调整大小，我的中间列会重叠。这是代码：
<div class="container-fluid con">
<div class="row">
<div class="col-md-2 d-none d-md-block col1">
</div>
<div class="col-md-6 col2">
<p id="header-p">Full stack developer specialising in responsive website design and smooth user experience. Practical experience in project management, branding strategy, and creative direction; devoted to functional programming and information architecture</p>
<hr id="hr1">
<p id="header-tag">Web Developer - User Experience Designer - Graphic Artist
</p>
</div>
<div class="col-md-2 pic-col">
<img class="img-responsive rounded-circle img-thumbnail" src="#">
</div>
<div class="col-md-2 d-none d-md-block col1">
</div>
</div>
</div>
<div class="container-fluid con2">
<div class="row">
<div class="col-md-2 d-none d-md-block col1"></div>
<div class="col-md-8 port-col"><h2 id="portfolio-header">Portfolio</h2>
<hr id="hr2">
</div>
<div class="col-md-2 d-none d-md-block col1">
</div>
</div>
</div>
CSS：
#header-p{
margin-top: 10%;
text-align: center;
color: white;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size:20px;
}
#header-tag{
padding-top: 1rem;
text-align: center;
color: white;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size:20px;
}
.con{
margin: 4rem auto 2rem auto;
}
.col1, .col3{
border: 1px solid #bfbfbf;
background-color: #bfbfbf;
height: 100vh;
}
.col2{
background-color: #cccccc;
height: 60vh;
}
.pic-col{
background-color: #cccccc;
height: 60vh;
}
#portfolio-header{
text-align: center;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 60px;
letter-spacing: 5px;
/*line-height: 90px;*/
max-width: 100%;
color: #b3b3b3;
}
.port-col{
max-height: 100vh;
}
.con2{
margin: 2rem auto 2rem auto;!important
}