Covert Bootstrap columns into rows for small devices - html

Question

I have a container with 4 rows each row has two columns in 4:8 ratio.
For each column it works perfectly for screens with width more than 1080px, for less than this the content overlaps.
What i want to do, is make all the columns turn into rows with a full width of the screen.
If anyone have any recommendation to get better results please help me.
I have found many questions for people having the same issue and tried their solution but nothing worked for me.
.proctitleleft {
font-size: 20px;
position: absolute;
left: 90px;
top: 20px;
bottom: 20px;
}
.procimageleft {
position: relative;
margin-bottom: 40px;
margin-right: 90px;
margin-top: 20px;
}
.procimageright {
position: relative;
margin-bottom: 40px;
margin-left: 90px;
}
.procparagleft1 {
position: absolute;
left: 100px;
top: 138px;
font-size: 14px;
}
.procparagleft2 {
position: absolute;
left: 100px;
top: 138px;
font-size: 14px;
}
.procparagleft3 {
position: absolute;
left: 100px;
top: 138px;
font-size: 14px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="processcontainer">
<div class="arw_tab_title">
<div class="tab_title">
<h2 class="title">The Process</h2>
<p class=""></p>
</div>
<div class="tab_sub_title">
<h2 class="title">our perfect process</h2>
</div>
</div>
<div class="row">
<div class="col-xs-8">
<div class="proctitleleft">
<h3>1-Far far away</h3>
</div>
<div class="procparagleft1">
<p>It all started with a farmer and his extraordinary efforts to grow what people later called the best cotton in town
<br>To Bangladesh we went to see if that was true.And it was!<br>
</p>
</div>
</div>
<div class="col-xs-4">
<div class="procimageleft">
<img src="https://cdn.shopify.com/s/files/1/1965/8259/t/4/assets/process1.png">
</div>
</div>
<div class="row">
<div class="col-xs-4">
<div class="procimageright">
<img src="https://cdn.shopify.com/s/files/1/1965/8259/t/4/assets/process2.png">
</div>
</div>
<div class="col-xs-8">
<div class="proctitleleft">
<h3>2-Lavish Studio left their mark </h3>
</div>
<div class="procparagleft2">
<p>Oh buddy! What can I say?
<br>Working around the clock to deliver powerful yet very elegant designs that was approved by an internal community before seeing the light of day<br>
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-8">
<div class="proctitleleft">
<h3>3-Complete the artwork</h3>
</div>
<div class="procparagleft3">
<p>Partnering up with the same factory that deal with Adidas, Reebok and Name, we were able to transform an idea into a very big powerful reality
</p>
</div>
</div>
<div class="col-xs-4">
<div class="procimageleft">
<img src="https://cdn.shopify.com/s/files/1/1965/8259/t/4/assets/process3.png">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<div class="procimageright">
<img src="https://cdn.shopify.com/s/files/1/1965/8259/t/4/assets/process4.png">
</div>
</div>
<div class="col-xs-8">
<div class="proctitleleft">
<h3>4- Quality meets perfection
</h3>
</div>
<div class="procparagleft2">
<p>We stand by our products because we’re confident in what we deliver.
<br> That’s why we designed an unsurpassed shopping and unboxing experience to befit such creations
<br>
</p>
</div>
</div>
</div>
</div>

Answer 1

use col-md-4 and col-md-8 instead of col-xs-* so you have 4:8 ratio above 992px width and full col-width under 992px. You don't have to do it by your own. It's the standard behavior of bootstrap.
see https://getbootstrap.com/css/#grid-media-queries for further details

Answer 2

use three classes col-md-4, col-sm-4 and col-xs-12, last one for smallest devices full width div tag.