Position images in responsive wrapper relative to one another - html

Question

I've got an image, which is about 600px wide, and several smaller images (a little over 100px each) that I need to position centered below the bigger image. Deal is, I need them all in a wrapper together, because I need them to scale relative to one another, rather than overlapping as the window is sized down. Right now, the smaller images shift according the the resizing, so they aren't staying in position relative to the bigger image. They also aren't positioned relatively because when I do so, the css centering no longer works.
Maybe a simpler way of putting it is this. I want these pictures all together in one div that is centered on the browser screen, so the pictures are responsive and stay in the same position/size relative to each other. The div is relative to the screen, and the pictures relative to the div. Inside the div is the big image on top, and 4 smaller images lined up underneath it.
I guess another way to put it is that I want them all the function responsively as if they were just one image, but I need them separate because I need to animate them separately.
http://codepen.io/kathryncrawford/pen/bVyeyL
<div id="wrapper">
<img id="logo" class="img-responsive copy" srcset="http://www.fillmurray.com/600/600"></img>
<div id="wrapperSig">
<img class="img-responsive signature" srcset="http://www.fillmurray.com/100/100"></img>
<img class="img-responsive signature" srcset="http://www.fillmurray.com/100/100"></img>
<img class="img-responsive signature" srcset="http://www.fillmurray.com/100/100"></img>
<img class="img-responsive signature" srcset="http://www.fillmurray.com/100/100"></img>
</div>
</div>
.copy{
opacity: 1;
position: absolute;
margin:auto;
top:0;
right:0;
bottom:0;
left:0;
}
#wrapper {
position: absolute;
margin: auto;
top:0;
right:0;
bottom:0;
left:0;
}
#logo {
position: absolute;
}
#wrapperSig {
display: inline;
position: absolute;
width: 420px;
margin: auto;
top:60%;
right:0;
bottom:0;
left:0;
}
.signature {
opacity: 1;
display: inline !important;
position: relative;
}

Answer 1

If I understand you correctly, you want the small images to drop down below the bigger one on small screens? Would this work by removing position absolute on everything but the wrappersig? http://codepen.io/jfoutch/pen/pjmEgq
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
.copy{
opacity: 1;
margin:auto;
top:0;
right:0;
bottom:0;
left:0;
}
#wrapper {
margin: auto;
top:0;
right:0;
bottom:0;
left:0;
}
#logo {
}
#wrapperSig {
display: inline;
position: absolute;
width: 420px;
margin: auto;
top:60%;
right:0;
bottom:0;
left:0;
}
.signature {
opacity: 1;
display: inline !important;
position: relative;
}