Как изменить размер окна на размер окна?

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

Не используйте снова и снова «ряд» внутри строки, если их нужно использовать. также следить за самозагрузки 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> 

Answer 2

Попробуйте это:

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

демо: http://codepen.io/hmache/pen/yJzyox взглянуть на документацию сетки Bootstrap в: http://getbootstrap.com/css/#grid-options