Stacking divs horizontally/vertically based on device/screen size

http://stackoverflow.com/questions/22511066/stacking-divs-horizontally-vertically-based-on-device-screen-size

by josephspens

HTML

<div class="container">
    <img src="http://lorempixel.com/745/365/sports/" alt="large" />
    <img src="http://lorempixel.com/214/145/sports/" alt="large" />
    <img src="http://lorempixel.com/214/145/sports/" alt="large" />
</div>

CSS

img {
  width: 100%;
  float: left;
  display: block;
  margin-bottom: 1em;
}

@media screen and (min-width: 20em) and (max-width: 30em) {
  img {
      width: calc(50% - 0.5em);
  }
  img:first-child {
      width: 100%;
  }
  img:nth-of-type(2n+2) {
      margin-right: 1em;
  }
}

@media screen and (min-width: 30em) {
  img {
      width: 25%;
  }
  img:first-of-type {
      width: calc(75% - 1em);
      margin-right: 1em;
  }
}