html - 如何在调整窗口大小时调整 div 的大小？

Question

我想在 4 列中显示元素列表及其描述，但是当我调整窗口大小时我希望只显示 2 列，这意味着元素及其描述，但实际发生的是当我调整了窗口的大小，元素列和它们的描述列是一个在另一个上，它变得不可读。

<div class="row">
        <div class="col-md-12 col-xs-12 col-sm-12 col-lg-6">                
                <div class="row">
                    <div class="col-md-6"> 
                       Item nr.1
                    </div>
                    <div class="col-md-6"> 
                       Description
                    </div>
                </div>                  
                <div class="row">
                    <div class="col-md-6"> 
                        Item nr.2
                    </div>
                    <div class="col-md-6"> 
                        Description
                    </div>
                </div>
        </div>                      
        <div class="col-md-12 col-xs-12 col-sm-12 col-lg-6">
            <div class="row">
                    <div class="col-md-6"> 
                       Item nr.3
                    </div>
                    <div class="col-md-6"> 
                       Description
                    </div>
                </div>                      
                <div class="row">
                    <div class="col-md-6"> 
                        Item nr.4
                    </div>
                    <div class="col-md-6"> 
                        Description
                    </div>
                </div>
        </div>          
</div>

有没有人知道如何更改上述 html，以便在调整窗口大小时 4 列变为 2 列？

Answer 1

不要在行内反复使用“行”，如果需要就使用。也遵循 bootstrap stander 不要添加你自己的东西你会破坏 strct

<div class="row">
  <div class="col-md-4"> 
    Item nr.1
  </div>
  <div class="col-md-4"> 
    Description
  </div>
  <div class="col-md-4"> 
    Item nr.2
  </div>
  <div class="col-md-4"> 
    Description
  </div>
</div>
<div class="clearfix"></div>
<div class="row">
  <div class="col-md-4"> 
    Item nr.1
  </div>
  <div class="col-md-4"> 
    Description
  </div>
  <div class="col-md-4"> 
    Item nr.2
  </div>
  <div class="col-md-4"> 
    Description
  </div>
</div>