Css 引导3-调整大小时，Img位于Img之上

我一直在使用post中的代码在主海报图像的顶部放置两个图像fbook图标和一个横幅。这是代码在我的引导索引文件中的样子：

   <div class="container">
      <div class="row">

         <div class="col-sm-4">

         </div>

         <div class="col-xs-12 col-sm-4">

            <div style="position: relative; left: 0; top: 0;">
              <img class="poster center-block" src="images/poster.png" style="position: relative;"/>
               <a href="https://www.facebook.com/" target="_blank">
                  <img class="fbook" alt="Facebook!" src="images/fbook.png"/>
               </a>
               <a href="http://www.yo.com/" target="_blank">
                  <img class="banner" alt="Yo!" src="images/banner.png"/>
               </a>
            </div>

         </div>

         <div class="col-sm-4">

         </div>

      </div>
 </div>

这两个图像将保持不变，直到列在大约.col sm-/768px处折叠。从768px到768px以下，这两个图像将使用col-xs-12边框对齐，并将它们放置在主海报图像的最左侧。主海报图像以CLS-X-12宽度为中心居中。p> 看起来col-sm-4将围绕主海报图像对齐，因此顶部的其他两个图像使用此列边框来对齐。当克伦号坍缩为col-xs-12时，左克洛门边界将进一步置于左侧

当使用col-xs-4时，同样的情况也会发生

我想找到一种方法，将两个图像放置在主海报图像的顶部，以便在调整窗口大小和折叠列时，它们将保持在原位

更新-解决方案：

css:

html:

---

您可以提供一个关于它应该是什么样子的模型，或者甚至是一个JSFIDLE或Bootply上的模型吗？很难简单地从你的写作中了解你想要实现什么。当然，她就是我在bootply中得到的代码：我希望底部的两个小图像放在350x539大图像的顶部。。甚至当网站的大小调整！在上面，就像在上面一样，或者在上面，就像在更大的图像上分层一样？最后一个-就像分层一样！是的，据我所知，你不可能用Bootstrap做到这一点。网格允许你在柱内的下一个柱，但它不打算在其他东西的上面分层。

img.poster {
    position: relative; 
    padding-top: 5px;
    max-width: 250px;
}

img.fbook {
    padding-top: 25px;
    max-width: 65px;
    position: absolute;       

    -ms-transform: rotate(-3deg); /* IE 9 */
    -webkit-transform: rotate(-3deg); /* Chrome, Safari, Opera */
    transform: rotate(-3deg);
}

img.banner {
    padding-top: 25px;
    max-width: 235px;

    position: absolute;       
}

.columnWidth {
    width: 33.33333333%;
    margin-left: 5%;

} 

<div class="col-sx-12 col-sm-4 columnWidth">