I'm struggling to position the content on the right side of an image in a card below the image using bootstrap and CSS. Despite searching online and in the bootstrap documentation, I haven't been able to find a solution to my issue. When the screen size becomes smaller, I simply want the AppName, Description, and AppDescription to be positioned below the image. Any help would be appreciated.
Below is the HTML code:
<div class="card">
<div class="row no-gutters">
<div class="col-auto col-md-6">
<img src="img/image.jpg" class="img-fluid image" alt="PayCloud App Demo" width="620" height="465">
</div>
<div class="col">
<div class="card-block px-2">
<p class="card-title AppName">AppName</p>
<p class="card-title Description">Restaurant Payment Service - January 2020</p>
<p class="card-text AppDescription">App Description.</p>
<a href="link.html"><span class="button">View Project</span></a>
</div>
</div>
</div>
</div>
CSS styles used:
.AppName{
font-family: itc-avant-garde-gothic-pro,sans-serif; /* ITC Bold */
font-weight: 700;
font-style: normal;
font-size: 42px;
margin-top: 10%;
margin-bottom: 0;
text-align: left;
font-size: 42px;
width: 50%;
margin-left: 5%;
opacity: 80%;
}
.Description{
color: #869FC9;
width: 60%;
margin-left: 5%;
margin-top: 0;
margin-bottom: 5%;
}
.AppDescription{
opacity: 87%;
width: 90%;
margin: auto;
font-family: realist, sans-serif;
font-weight: 400;
font-style: normal;
font-size: 18px;
margin-bottom: 2%;
}