Seeking help on how to center the first column (a photo) in a row without centering the second column and its content. This is for a responsive layout on small devices, but applying the text-center class to the parent row centers all content. Here is the link to view the layout: https://i.sstatic.net/jW0Rq.jpg
Open to any suggestions or workarounds to achieve this layout.
.blog-topics {
max-width: 180px;
max-height: 180px;
}
.blog-post {
max-width: 250px;
max-height: 250px;
margin-top: 5px;
}
.blog-box {
max-width: 700px;
}
.blog-post-topic {
color: #17a2b8;
font-size: 14px;
margin: 0px;
padding: 0px;
}
.blog-post-title {
text-transform: uppercase;
font-weight: 600;
margin: 0px 0px 8px 0px;
padding: 0px;
}
.blog-post-excerpt {
font-size: 16px;
color: #686868;
margin: 0px 0px 10px 0px;
padding: 0px;
}
@media (max-width: 540px) {
.btn-blog {
display: block;
width: 100%;
}
}<div class="row p-3">
<div class="col border">
<h3 class="text-center">Recent Posts</h3>
<div class="row">
<div class="col-auto">
<img src="img/guy.jpg" alt="topic" class="blog-post">
</div>
<div class="col-md blog-box">
<p class="blog-post-topic">Privary & Security</p>
<p class="blog-post-title">Guarding Against Computer Malware</p>
<p class="blog-post-excerpt">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit</p>
<button type="button" class="btn btn-info btn-blog mb-4">Read More</button>
</div>
</div>
</div>
</div>