How to fix responsive problem in Bootstrap 4 - html

Question

I am using Bootstrap 4 and I have the following jumbotron class:
.rounded-circle{
vertical-align: left;
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
left: -150px;
top: -50px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="jumbotron rounded-0">
<div class="container">
<div class="row">
<div class="col-md-4">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Circle_-_black_simple.svg/500px-Circle_-_black_simple.svg.png" alt="..." class="rounded-circle">
</div>
<div class="col-md-8">
this is mobile way of the container and other line
</div>
</div>
</div>
</div>
With this syntax, my desktop view is displaying as well following,
https://i.stack.imgur.com/mUrAe.png
but in my mobile view, it is not displaying in correct position as following https://i.stack.imgur.com/SaRuW.png
then how could I view my image and descriptions on all devices (desktop, tab and phone) as well, I need in the small device top image and then description under the image.
edited image

Answer 1

It's wrong here to use position: absolute with col, flex-box gives you the utility to make the behavior you are trying to reach without position: absolute,
First add the class align-items-center beside class row (this will align center vertically)
Second add the class col-12 to the columns (make the description below the image for smaller size)
Then optionally, you can add the classes text-center and text-md-left (on bigger sizes it will align left and on smaller it will be center)
.rounded-circle{
width: 100px;
height: 100px;
border-radius: 50%;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="jumbotron rounded-0">
<div class="container">
<div class="row align-items-center text-center text-md-left">
<div class="col-12 col-md-4">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Circle_-_black_simple.svg/500px-Circle_-_black_simple.svg.png" alt="..." class="rounded-circle">
</div>
<div class="col-12 col-md-8">
this is mobile way of the container and other line
</div>
</div>
</div>
</div>