Responsive layout with bootstrap - html

Question

I try to make my first page. I'm learning coding but I have problems with a responsive display. I'm making with Bootstrap, I want to make my layout responsive in all way.
But this is hard for me as I'm starting and learning to code.
.fromtop{
padding-top: 30px;
}
#media (max-width: 767px){
.fromtop{
padding: 0px;
} }
.circle{
border-radius: 50%;
width: 250px;
height: 250px;
background: red;
color: white;
}
#media (max-width: 1199px){
.circle{
border-radius: 50%;
width: 230px;
height: 230px;
background: red;
color: white;
}
}
#media (max-width: 1000px){
.circle{
border-radius: 50%;
width: 210px;
height: 210px;
background: red;
color: white;
}
}
#media (max-width: 850px){
.circle{
border-radius: 50%;
width: 190px;
height: 190px;
background: red;
color: white;
}
}
.text-inner {
text-align: center;
display: inline-block;
}
.number{
font-size: 110px;
width: 100%;
margin-top: 89px;
}
#media (max-width: 991px) {
.number{
font-size: 110px;
width: 100%;
margin-top: 0px;
} }
#media (max-width: 421px) {
.number-3{
font-size: 110px;
width: 100%;
margin-top: -50px;
} }
.middle{
padding-top: 50px;
}
.white-text{
font-size: 20px;
color: rgb(255, 255, 255);
text-align: center;
}
.nop{
margin-top: 0px;
}
.totop{
margin-top: -45px;
}
.arrow{
margin-top: 100px;
}
.under-number {
margin-left: 80px;
}
<section class="well-md bg-white white">
<div class="container inset-6">
<h2 class="text-bold text-center red">Lorem ipsum</h2>
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-3">
<div class="circle">
<p class="number text-bold text-inner">1.</p>
<p class="text-bold under-number">Lorem</p>
</div>
</div>
<div class="text-left col-lg-9 col-md-8 col-sm-9">
<h3 class="text-bold big-grey goright">Lorem ipsum</h3>
<p class="grey goright">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tristique mattis arcu a ullamcorper. In hac habitasse platea dictumst. In a nibh a urna condimentum aliquet egestas sed nulla. Sed molestie ligula id enim placerat suscipit. Sed sit amet semper purus.</p>
</div>
</div>
<img src="images/arrow.png">
<div class="row totop">
<div class="text-right col-lg-9 col-md-9 col-sm-9">
<h3 class="text-bold big-grey">Lorem ipsum</h3>
<p class="grey">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tristique mattis arcu a ullamcorper. In hac habitasse platea dictumst. In a nibh a urna condimentum aliquet egestas sed nulla. Sed molestie ligula id enim placerat suscipit. Sed sit amet semper purus.</p>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
<div class="circle">
<p class="number text-bold text-inner">2.</p>
<p class="text-bold under-number">Lorem</p>
</div>
</div>
</div>
<img src="images/arrow2.png" class="pull-right">
<div class="row arrow">
<div class="col-sm-3">
<div class="circle">
<p class="number text-bold text-inner number-3">3.</p>
<p class="text-bold under-number">Lorem</p>
</div>
</div>
<div class="text-left col-md-9">
<h3 class="text-bold big-grey goright">Lorem ipsum</h3>
<p class="grey goright">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tristique mattis arcu a ullamcorper. In hac habitasse platea dictumst. In a nibh a urna condimentum aliquet egestas sed nulla. Sed molestie ligula id enim placerat suscipit. Sed sit amet semper purus.</p>
</div>
</div>
</div>
</section>