CSS - My bootstrap columns aren't breaking correctly - css

Question

I have a list which looks like this:
https://codepen.io/Insane415/pen/QgbQvv
but somehow the columns aren't breaking correctly when resizing the window. I want to keep it readable when someone access my page with a smartphone or other small devices.
Any help would be appreciate
(reduced code)
HTML
<ol class="product-list">
<div class="row">
<div class="col-md-3">
<li>
<div class="row vertical-center">
<div class="col-lg-4 col-md-12 col-xs-12 text-right">
<strong>Productname</strong>
<span class="product-description">
Some text, which describes the product lorem ipsum.
</span>
</div>
<div class="image-holder col-lg-4 col-xs-12 col-md-12">
<img src="http://via.placeholder.com/100x100"/>
</div>
<div class="circle col-lg-4 col-xs-12 col-md-12">
<span class="circle-number"></span>
</div>
</div>
</li>
<li>
<div class="row vertical-center">
<div class="col-lg-4 col-md-12 col-xs-12 text-right">
<strong>Productname</strong>
<span class="product-description">
Some text, which describes the product lorem ipsum.
</span>
</div>
<div class="image-holder col-lg-4 col-xs-12 col-md-12">
<img src="http://via.placeholder.com/100x100"/>
</div>
<div class="circle col-lg-4 col-xs-12 col-md-12">
<span class="circle-number"></span>
</div>
</div>
</li>
</div>
<div class="col-md-6 large-image-holder">
<img class="image-large" src="http://via.placeholder.com/500x400"/>
</div>
<div class="col-md-3">
<li>
<div class="row vertical-center">
<div class="circle col-lg-4 col-xs-12 col-md-12">
<span class="circle-number"></span>
</div>
<div class="image-holder col-lg-4 col-xs-12 col-md-12">
<img src="http://via.placeholder.com/100x100"/>
</div>
<div class="col-lg-4 col-md-12 col-xs-12 text-left">
<strong>Productname</strong>
<span class="product-description">
Some text, which describes the product lorem ipsum.
</span>
</div>
</div>
</li>
<li>
<div class="row vertical-center">
<div class="circle col-lg-4 col-xs-12 col-md-12">
<span class="circle-number"></span>
</div>
<div class="image-holder col-lg-4 col-xs-12 col-md-12">
<img src="http://via.placeholder.com/100x100"/>
</div>
<div class="col-lg-4 col-md-12 col-xs-12 text-left">
<strong>Productname</strong>
<span class="product-description">
Some text, which describes the product lorem ipsum.
</span>
</div>
</div>
</li>
</div>
CSS
body {
counter-reset: counter;
}
.circle-number {
counter-increment: counter;
}
.circle-number:after {
content: counter(counter);
}
.product-list{
padding-left: 50px;
padding-right: 50px;
}
.product-description{
display: block;
}
img{
margin-top: 15px;
}
li{
/*display: inline-block;*/
list-style-type: none;
border-bottom: 2px solid #47c9e5;
padding-bottom: 20px;
margin-top: 10px;
}
.large-image-holder{
text-align: center;
object-fit: cover;
}
.image-large{
object-fit: cover;
width: 100%;
}
.circle{
display: flex;
align-items: center;
justify-content: center;
border-radius: 100%;
background-color: #47c9e5;
max-width: 70px;
max-height: 70px;
}
.circle-number{
font-size: 45px;
color: white;
}
.vertical-center{
display: flex;
align-items: center;
justify-content: center;
}
.image-holder{
text-align: center;
}
li:last-child{
border-bottom: none;
}