Simple 3-2-1 responsive column layout

Simple 3-2-1 responsive column layout

by Emmanuel Garcia

HTML

<div class="responsive-container col-3-2-1" style="background-color: pink">
    <div class="column-element" >Elem1</div>
    <div class="column-element" >Elem2</div>
</div>

CSS

.responsive-container {
  margin:0;
  padding: 0;
  max-width: 800px;
}

.responsive-container .column-element {
  display: block;
  margin: 0; 
  padding: 10px 0;
}

.responsive-container .column-element:last-child:after {
  visibility: hidden;
  content: ".";
  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;
  }
}