Bootstrap: responsive card - html

Question

I'm trying to recreate a card just like this one from WIX using bootstrap.
I have 2 problems:
Only at full screen the card touches the contact bar, when I reduce the size the card starts floating like this. (EDIT: solved this problem)
I would like the card to become vertical (text below photo) when the screen becomes to small. (EDIT: solved this problem)
UPDATE:
I still have a problem with responsiveness: when the screen becomes smaller my text doesn't fit nicely and the photo of my head is cut in half on the top like this on in Ipad and like this on a phone.
This is how a part of my html and css looks like:
.grid-container{
display: grid;
grid-template-rows: 580px 75px 405px;
width: 100vw;
}
.grid-item-contact{
background-color: #efefef;
display: grid;
grid-template-columns: 25% 50% 25%;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- main container -->
<div class = "grid-container">
<!-- card with photo -->
<div class="grid-item-card">
<div class="card mb-3 mx-auto border-0" style="max-width: 50vw; margin-top: 10vh; margin-bottom: 0px; border-radius:5px 5px 0px 0px;">
<div class="row no-gutters">
<div class="col">
<img src="cat.jpg" class="card-img" alt="...">
</div>
<div class="col">
<div class="card-body">
<h5 class="card-title">Quinten KJ</h5>
<h6 class="card-text">Master student financial engineering</h6>
<p class="card-text">This is text</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
</div>
<!--contact bar -->
<div class="grid-item-contact">
<div class = "grid-item-contact-1"></div>
<div class = "grid-item-contact-2" style="background-color: #636769; text-align: center; border-radius:0px 0px 5px 5px;">
<img src="linkedin-6-32.png" style="margin-top: 20px;">
<img src="facebook-3-32.png" style="margin-top: 20px; margin-left: 20px;">
<img src="mail-32.png" style="margin-top: 20px; margin-left: 20px;">
</div>
<div class = "grid-item-contact-3"></div>
</div>

Answer 1

Please try this..
later i add the description for all..
Iam using col-md-6 instead of col for medium and small devices alignment. And order property use to change order of card text and card image. Some media queries(640px and 480px) used to align correct grid-container and also add some padding to grid-item-hello for small devices.
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#400;700&display=swap');
/*--body--*/
body {
overflow-x: hidden;
font-family: 'Open Sans', sans-serif;
background-color: #efefef;
background-repeat:no-repeat;
}
/*--navbar--*/
.navbar{
text-transform: uppercase;
font-weight: 700;
font-size: .9rem;
letter-spacing: .1rem;
background: rgba(0, 0, 0, .6)!important;
}
.navbar-nav li {
padding-right: .7rem;
}
.navbar-dark .navbar-nav .nav-link {
color: white;
}
.navbar-dark .navbar-nav .nav-link:hover {
color: #bfbfbf;
}
/*-- slider --*/
.carousel-item {
height: 100vh;
width: 100vw;
min-height: 350px;
background: no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.carousel-caption{
position: absolute;
top: 68%;
}
.carousel-caption h2{
font-size: 2rem;
letter-spacing: .1rem;
text-shadow: .1rem .1rem .5rem black;
padding-bottom: 1rem;
}
.carousel-caption h5{
font-size: 1.5rem;
letter-spacing: .1rem;
text-shadow: .1rem .1rem .3rem black;
padding-bottom: 1.3rem;
}
.btn-lg{
border-width: medium;
font-size: 1.1rem;
}
/*--about--*/
.grid-container{
display: grid;
grid-template-rows: 520px 60px 310px;
width: 100vw;
}
.grid-item-card{
align-self: end;
}
.grid-item-contact{
background-color: #efefef;
display: grid;
/*--grid-template-columns: 490px 940px 490px;--*/
grid-template-columns: 15% 70% 25%;
}
.grid-item-hello{
background-color: #efefef;
text-align: center;
color: #636769;
}
.helloTitle{
margin-top: 90px;
margin-bottom: 20px;
}
.helloText{
margin-bottom: 10px;
}
#media only screen and (max-width: 640px) {
.grid-item-hello{
padding:0 20px;
}
.grid-container{
grid-template-rows: 680px 60px 300px;
}
}
#media only screen and (max-width: 480px) {
.grid-container{
grid-template-rows: 580px 60px 400px;
}
}
<!-- Based on Wix template: https://nl.wix.com/website-template/view/html/1893?siteId=31c9cc64-4739-437a-bf99-8a87fae88840&metaSiteId=7df46866-884d-4ed2-a9ea-b6f80df2ebaf&originUrl=https%3A%2F%2Fnl.wix.com%2Fwebsite%2Ftemplates%2Fhtml%2Fportfolio-cv -->
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link href="styles.css" rel="stylesheet">
<title>About</title>
</head>
<body style="background-image: url(https://images.unsplash.com/photo-1449157291145-7efd050a4d0e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80);">
<!-- navbar -->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark">
<div class="container">
<a class="navbar-brand" href="index.html">Quinten KJ</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="cv.html">CV</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html" style="border-style: solid; border-width: medium; border-radius: 5px; margin-top: -4px;">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- main container -->
<div class="grid-container">
<!-- card with photo -->
<div class="grid-item-card">
<div class="card mx-auto border-0" style="max-width: 70vw; margin-top: 10vh; margin-bottom: 0px; border-radius:5px 5px 0px 0px;">
<div class="row">
<div class="col-lg-6 order-md-0 order-1 px-md-0">
<img src="https://images.unsplash.com/photo-1537815749002-de6a533c64db?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1445&q=80" class="card-img" alt="...">
</div>
<div class="col-lg-6 order-md-1 order-0 px-md-0">
<div class="card-body">
<h5 class="card-title">Quinten KJ</h5>
<h6 class="card-text">Master student financial engineering</h6>
<p class="card-text">This is text</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
</div>
<!--contact bar -->
<div class="grid-item-contact">
<div class="grid-item-contact-1"></div>
<div class="grid-item-contact-2" style="background-color: #636769; text-align: center; border-radius:0px 0px 5px 5px;">
<img src="https://image.flaticon.com/icons/svg/2111/2111723.svg" style="margin-top: 20px; height:36px;; width: 36px;">
<img src="https://image.flaticon.com/icons/svg/1051/1051360.svg" style="margin-top: 20px; margin-left: 20px; height:36px;; width: 36px;">
<img src="https://image.flaticon.com/icons/svg/1946/1946426.svg" style="margin-top: 20px; margin-left: 20px; height:36px;; width: 36px;">
</div>
<div class="grid-item-contact-3"></div>
</div>
<!--Hello-->
<div class="grid-item-hello">
<h3 class="helloTitle">Hello, I'm Quinten!</h3>
<p class="helloText">"I'm a greater believer in luck, and I find the harder I work the more I have of it" </p>
<p class="helloText">- Thomas Jefferson -</p>
<p class="helloText"></p>
<p class="helloText"></p>
<p class="helloText">I'm a master student financial engineering at the University of Antwerp.</p>
<p class="helloText"></p>
<p class="helloText"></p>
</div>
<!-- end main container-->
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>