CSS-我的引导列不是'；不能正确断开

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

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

任何帮助都将不胜感激

（简化代码）

HTML

---

您需要更具体一些，从代码笔来看，引导列似乎正在正确地折叠。另外，你的HTML是无效的，因为你不能在ol或ul中直接使用div。好的，我稍后会删除ol和li元素。只是想避免感染。我的意思是，元素，如producttext、picture和圆圈相互重叠。但我希望它们在空间不足时断裂。

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

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