Simple 3-2-1 responsive column layout

Simple 3-2-1 responsive column layout

by Emmanuel Garcia

HTML

<ul class="responsive-container col-3-2-1" style=" text-align:center;">
    <li class="column-element" style="background-color:#0193DD;">
    
   <h2>SAPPHIRE / ZAFIRO</h2>
    Weekly / Semana - 130,000<br>
        Fri-Sat / Vier-Sáb - 26,000<br>
        Sun-Thurs / Dom-Jue - 15,600<br><br>
        WEEKS / SEMANAS
        <br>
        1-15, 49-50 
    </li>
    <li class="column-element" style="background-color: #AEC0CB">
      <h2>PLATINUM / PLATINO</h2>
    Weekly / Semana - 80,000<br>
        Fri-Sat / Vier-Sáb - 16,000<br>
        Sun-Thurs / Dom-Jue - 9,600<br><br>
        WEEKS / SEMANAS
        <br>
        25-32
    </li>
    <li class="column-element" style="background-color: #F1B800">
       <h2>GOLD / ORO</h2>
    Weekly / Semana - 50,000<br>
        Fri-Sat / Vier-Sáb - 10,000<br>
        Sun-Thurs / Dom-Jue - 6,000<br><br>
        WEEKS / SEMANAS
        <br>
        21-24, 33-37 
    </li>
    <li class="column-element" style="background-color: #01789C">
        <h2>SILVER / PLATA</h2>
    Weekly / Semana - 30,000<br>
        Fri-Sat / Vier-Sáb - 6,000<br>
        Sun-Thurs / Dom-Jue - 3,600<br><br>
        WEEKS / SEMANAS
        <br>
        16-20, 38-48 
         </li>
    <li class="column-element" style="background-color: #03A33F">
        <h2>EMERALD / ESMERALDA</h2>
    Weekly / Semana - 160,000<br>
        Fri-Sat / Vier-Sáb - 32,000<br>
        Sun-Thurs / Dom-Jue - 19,200<br><br>
        WEEKS / SEMANAS
        <br>
        7, 51-52 
    </li>
    
</ul>

CSS

.responsive-container {
  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;
  content: ".";
  display: block;
  height: 0;
  clear: both;
}

@media (min-width: 600px) {
  .responsive-container.col-3-2-1 .column-element {
    width: 20%;
  }
  .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;
  }
}