* {
  box-sizing:border-box;
}
.left {
  background-color:#ffffff;
  padding:10px;
  float:left;
  width:30%; /* 30 por defecto */
}
.main {
  background-color:#ffffff;
  padding:10px;
  float:left;
  width:38%; /* The width is 60%, by default */
}
.right {
  background-color:#f1f1f1;
  padding:10px;
  float:right;
  width:30%; /* The width is 20%, by default */
}

.izquierda{
  background-color:#000000;
  padding:40px;
  float:left;
  width:30%; 
}
.centro{
  background-color:#000000;
  padding:40px;
  float:left;
  width:38%; 
}
.derecha{
  background-color:#000000;
  padding:40px;
  float:left;
  width:30%;
}


/* Use a media query to add a break point at 800px: */
@media screen and (max-width:800px) {
 .left,.main,.right,.izquierda,.centro,.derecha {
    width:100%;
    flex-flow: column;
  }
}