Trying to achieve a specific Bootstrap layout without repeating content is my current challenge. Essentially, I aim to divide some content into 2 columns at the sm/md breakpoints and then switch to 3 columns for the lg breakpoint.
The layout for sm/md breakpoints would appear as follows:
<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>On the lg breakpoint, the format should adjust to this:
<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>I am aware that duplicating content and utilizing hidden/visible classes could solve this issue by showing specific items at certain breakpoints. However, I am curious if achieving this can be done without repetition of content.
An option could be setting all 3 columns to col-lg-6, resulting in the 3rd column falling beneath the first one. Yet, I prefer having the items equally distributed across columns to ensure they have the same height.