CSS - 我的bootstrap列没有正确破坏

Question

我有一个如下所示的列表：

https://codepen.io/Insane415/pen/QgbQvv

但不知何故，在调整窗口大小时，列没有正确断开。当有人使用智能手机或其他小型设备访问我的页面时，我希望保持可读性。

任何帮助都会受到赞赏

（缩减代码）

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;
}