Is there a way to dynamically change the number of columns in an unordered list when the screen expands past a certain width? I've heard Bootstrap might have a solution for this, but I haven't had experience using it before. Here's a link to my code on jsfiddle if anyone wants to take a look: http://jsfiddle.net/eN9qM/
The HTML:
<div class="sidebar">
<div class="search-filters">Filters</div>
<div class="search-results">
<div class="listings">
<ul class="container">
<li class="item">Hello</li>
<li class="item">Byebye</li>
<li class="item">Chuck</li>
<li class="item">Paul</li>
</ul>
</div>
<div class="listings-footer"></div>
</div>
</div>The CSS:
.sidebar {
position: fixed;
top: 47px;
right: 0;
bottom: 0;
width: 60%;
overflow-y: scroll;
background-color: aqua;
}
.search-filters {
background-color: white;
height: 40%;
}
.search-results {
padding: 10px 0 20px 20px;
border: 3px solid black;
height: 100%;
}
.listings {
border: 3px solid red;
height: 100%;
}
.listings-footer {
border: 3px solid blue;
}
.ul {
list-style-type: none;
background-color: pink;
}
.li {
background: green;
float: left;
height: 250px;
margin: 0 10px 10px 0;
}
@media(min-width: 1200px) {
.li {
width: 25%;
}
}
.li:nth-child(even) {
margin-right: 0;
}