We would like to know how to create 3-2-1 responsive column layout.
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.responsive-container {<!-- www.j a va2s. com-->
margin: 0;
padding: 0;
overflow: hidden;
}
.responsive-container .column-element {
display: block;
margin: 0;
padding: 10px 0;
}
.responsive-container .column-element:last-child:after {
visibility: hidden;
display: block;
height: 0;
clear: both;
}
@media ( min-width : 600px) {
.responsive-container.col-3-2-1 .column-element {
width: 33.333%;
}
.responsive-container.col-3-2-1 .column-element:nth-child(2n+1),
.responsive-container.col-3-2-1 .column-element:nth-child(2n+2) {
float: left;
}
.responsive-container.col-3-2-1 .column-element:nth-child(2n+3) {
float: right;
}
}
@media ( max-width : 600px) {
.responsive-container.col-3-2-1 .column-element {
width: 50%;
}
.responsive-container.col-3-2-1 .column-element:nth-child(2n+1) {
float: left;
}
.responsive-container.col-3-2-1 .column-element:nth-child(2n+2) {
float: right;
}
}
@media ( max-width : 400px) {
.responsive-container.col-3-2-1 .column-element {
width: 100%;
}
.responsive-container.col-3-2-1 .column-element:nth-child(1n) {
float: none;
}
}
</style>
</head>
<body>
<ul class="responsive-container col-3-2-1">
<li class="column-element" style="background-color: #EEE">Elem1</li>
<li class="column-element" style="background-color: #DDD">Elem2</li>
<li class="column-element" style="background-color: #CCC">Elem3</li>
<li class="column-element" style="background-color: #AAA">Elem4</li>
</ul>
</body>
</html>
The code above is rendered as follows: