CSS colocando uma imagem em cima de outra

Eu estou trabalhando no modelo de design CSS.

Eu tenho duas imagensimageOne eimageTwo.

Ambos sãoposition: relative porque se eu definir um delesposition: absolute então ele não fica mais responsivo e a responsividade é a chave aqui.

O que eu quero é colocarimageTwo Em cima deimageOne.

Como posso conseguir isso enquanto o recurso responsivo do twitterbootstrap ainda funciona nessas duas imagens?

Abaixo está o meu código: (jsfiddle availableAqui)

<div class="imageOne image"></div>
<div class="imageTwo image"></div>

CSS

.image {
    position: relative;
    width: 100px;
    height: 100px;
    border: 1px solid red;
}
.imageOne {
    z-index: 0;
}
.imageTwo {
    z-index: 1;
}