Why are my columns overlapping vertically when I resize browser? - resize

Question

I'm practising bootstrap responsive web development, I've managed to make my webpage fairly responsive when I change the width however my middle columns overlap if I resize vertically. Here's the code:
<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>
And the 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
}
the full code is here if I'm missing anything https://codepen.io/Seaplush/pen/rKVLmX