html - レスポンシブ div と画像

Question

水平に配置された div に 3 つの画像があります。ページのサイズを変更すると、画像の位置が変更され、垂直方向の配置で浮きます。また、ページの他の div に他の画像を配置する必要があります。画像を下側に配置したいのですが、助けてください。これがコード例です。

.box{
   display: inline-block;
   position: relative;
   bottom:100%;
   width: 100%;
   margin: 5% 5% 0 0;
   font-size: 12px;	
}
.box:before{
   content: "";
   display: block;
   padding-top: 100%; 
}	
img {
   max-width:100%;
   height:auto;
   border:1px solid black;
   text-align:center;
}
.content{
   /* Positioning */
   position:  absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;

   /* Styling */
   border:1px solid;
   padding: 30px;
   text-align: center;
   vertical-align: center;
   text-transform: uppercase;
   color: #fff;
}

<div class="box">
   <div class="content">
      <img src="http://fantapr.altervista.org/paul.jpg" width="350px">
      <img src="http://fantapr.altervista.org/paul.jpg" width="350px">
      <img src="http://fantapr.altervista.org/paul.jpg" width="350px">
   </div>
</div>

強いテキスト