Как выполнить этот макет Bootstrap без дублирования контента?

Question

Я пытаюсь понять, как выполнить определенный макет Bootstrap без дублирования контента. В принципе, я хотел бы, чтобы некоторый контент разбился на 2 столбца на контрольных точках sm/md, а затем на 3 столбца для точки останова lg.

Для sm/md макет будет выглядеть так:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-sm-6"> 
 
     Item 1<br/> 
 
     Item 2<br/> 
 
     Item 3 
 
    </div> 
 
    <div class="col-sm-6"> 
 
     Item 4<br/> 
 
     Item 5<br/> 
 
     Item 6 
 
    </div> 
 
    </div> 
 
</div>

А потом на lg точки останова, я хочу, чтобы она выглядела так:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-sm-4"> 
 
     Item 1<br/> 
 
     Item 2 
 
    </div> 
 
    <div class="col-sm-4"> 
 
     Item 3<br/> 
 
     Item 4 
 
    </div> 
 
    <div class="col-sm-4"> 
 
     Item 5<br/> 
 
     Item 6 
 
    </div> 
 
    </div> 
 
</div>

Теперь я знаю, что я мог бы выполнить это путем дублирования контента и использования классов, чтобы показывать только определенные элементы в определенных точках останова, но мне было интересно, можно ли выполнить это без дублирования контента.

Я также знаю, что я мог бы просто установить все 3 столбца на col-lg-6, а третий столбец упадет прямо под первым, но я надеялся, что элементы внутри столбцов будут одинаково распределены, поэтому они будут одинаковой высоты.

Answer 1

Bootstrap позволяет указать несколько точек останова col-*-*. Один столбец может иметь (например) col-sm-3 col-md-4 col-lg-6, а Bootstrap применит соответствующий размер, основанный на ширине видового экрана.

Для ваших потребностей, вы можете использовать что-то вдоль линий:

<div class="container"> 
    <div class="row"> 
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-4">Item 1</div> 
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-4">Item 2</div> 
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-4">Item 3</div> 
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-4">Item 4</div> 
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-4">Item 5</div> 
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-4">Item 6</div> 
    </div> 
</div> 

Так мы говорим Bootstrap, что если XS, SM или MD действительны ширина столбца 6/12 и если LG мы используем ширину столбца 4/12.