Stacking divs horizontally/vertically based on device/screen size

Problem

I've come across this problem wherein I have the divisions as follows: enter image description here

This is basically a small part of a larger problem, and by understanding how the following works I'm planning to address a bigger problem.

As it can be seen in the above image I have two smaller divisions, each of which occupies half the height of the larger one. However, in tablet I want them to be side by side.

This could be easily addressed by using Bootstrap or other frameworks out there, but my motive in asking this question is to understand the basics of how it can be done from scratch and more importantly understand the core concept.

I had a go at it, Here is my attempt JSFiddle

Here is the code I've come up with:

<div class="container">
<div class="largeImage">  
  <img src="http://lorempixel.com/745/292/sports/" alt="large">
</div>

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

.largeImage{
  max-width:740px;
  height:auto;
  width:100%;
  display:inline-block;
  clear:both;
}

.largeImage img{
  width:100%;
}

.smallImages{
  background-color:lightgray;
  display:inline-block;
  max-width:210px;
}
.smallImages img{
  width:100%;
  height:auto;
}
.container{
  background-color:whitesmoke ;
  max-width:960px;
  width:auto;
  margin:0 auto;
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {

  body{
    background-color:green;
  }

  .smallImages{
    width:100%;

  }

  .smallImages img{
    display:inline-block;
    float:left; 
    clear:both;
  }
  .largeImage{
   min-width:100% !important; 
  }
}

I do not know if I'm over-complicating things. But I hope someone could clarify it for me here.

To state my question: How can I stack up the divisions as described in the Image above, without using any frameworks and what needs to be corrected in my attempt?

Problem courtesy of: md1hunox

Solution

How's this: http://jsfiddle.net/josephspens/pNVFw/

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;
  }
}
Solution courtesy of: Joseph Spens

Discussion

The screen sizes can be modified, but here is a basic example of how you can do this: http://jsfiddle.net/4cucC/1/

@media only screen and (max-width: 768px) {
  .smallImages{
      max-width:100%;
  }
   .smallImages img{
      max-width: 210px;
   }
}
Discussion courtesy of: apohl

This recipe can be found in it's original form on Stack Over Flow.