body {
    background-color: red;
  }
@media only screen and (min-width: 300px) {
  body {
    background-color: green;
  }
}

@media only screen and (min-width: 768px) {
  body {
    background-color: blue;
  }
}

#small{
  float:left;
  width: 66%;
}

#medium{
  float:left;
  width: 33%;

}

@media only screen and (max-width: 300px) {
 #small, #medium, #large {
    width: 100%;
  }
}

@media only screen and (min-width: 300px) and (max-width: 768px) {
 #large{
    display: block;
    width: 100%;
  }
}

@media only screen and (min-width:768px){
  #large, #small, #medium {
    float: left;
    width: 33%;
  }
}

#small{
font-size: small;
}

#medium{
font-size: medium;
}

#large{
font-size: large;
}