屏幕尺寸缩小时，Div重叠

Question

这看起来似乎是一个简单的问题，但是我使用了一些真实的div，当鼠标移到css过渡时会出现另一个div。请参阅演示http://www.minimit.com/demos/3d-flip-animations-css-orizzontal的链接。

当屏幕尺寸缩小到col-sm-12时，它很快就能在col-md-3（全屏）中正常工作。如果有人有空闲时间看看我做错了什么会很棒。在此先感谢:-)

我凌乱的代码......

HTML

<div class="row">
    <div class="thumbnail-wrap">
        <!-- thumbnail 1 -->

        <div class="col-sm-6 col-md-3">
            <div class="item">
                <div class="item-0">
                    <div class="content-0">
                        <img alt="thumbnail" src="img/thumbnails/1.jpg"
                        style="width:100%;">

                        <h1><a class="btn btn-default" href=
                        "ground-works.html">Ground Works &rarr;</a></h1>
                    </div>
                </div>

                <div class="item-1">
                    <div class="content-1">
                        <img alt="thumbnail" src=
                        "img/thumbnails/thumb1-bk.png" style="width:100%;">

                        <h1><a class="btn btn-default" href=
                        "ground-works.html">Ground Works &rarr;</a></h1>
                    </div>
                </div>
            </div>
        </div><!-- thumbnail 2 -->

        <div class="col-sm-6 col-md-3">
            <div class="item">
                <div class="item-0">
                    <div class="content-0">
                        <img alt="thumbnail" src="img/thumbnails/1.jpg"
                        style="width:100%;">

                        <h1><a class="btn btn-default" href=
                        "ground-works.html">Ground Works &rarr;</a></h1>
                    </div>
                </div>

                <div class="item-1">
                    <div class="content-1">
                        <img alt="thumbnail" src=
                        "img/thumbnails/thumb1-bk.png" style="width:100%;">

                        <h1><a class="btn btn-default" href=
                        "ground-works.html">Ground Works &rarr;</a></h1>
                    </div>
                </div>
            </div>
        </div><!-- thumbnail 3 -->

        <div class="col-sm-6 col-md-3">
            <div class="item">
                <div class="item-0">
                    <div class="content-0">
                        <img alt="thumbnail" src="img/thumbnails/1.jpg"
                        style="width:100%;">

                        <h1><a class="btn btn-default" href=
                        "ground-works.html">Ground Works &rarr;</a></h1>
                    </div>
                </div>

                <div class="item-1">
                    <div class="content-1">
                        <img alt="thumbnail" src=
                        "img/thumbnails/thumb1-bk.png" style="width:100%;">

                        <h1><a class="btn btn-default" href=
                        "ground-works.html">Ground Works &rarr;</a></h1>
                    </div>
                </div>
            </div>
        </div><!-- thumbnail 4 -->

        <div class="col-sm-6 col-md-3">
            <div class="item">
                <div class="item-0">
                    <div class="content-0">
                        <img alt="thumbnail" src="img/thumbnails/1.jpg"
                        style="width:100%;">

                        <h1><a class="btn btn-default" href=
                        "ground-works.html">Ground Works &rarr;</a></h1>
                    </div>
                </div>

                <div class="item-1">
                    <div class="content-1">
                        <img alt="thumbnail" src=
                        "img/thumbnails/thumb1-bk.png" style="width:100%;">

                        <h1><a class="btn btn-default" href=
                        "ground-works.html">Ground Works &rarr;</a></h1>
                    </div>
                </div>
            </div>
        </div>
    </div><!---Thumbnail Wrap==-->
</div><!---Thumnail Row==-->

CSS

.item {
    width: 100%;
    height: 100%;
}
.item-0,
.item-1 {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 1px solid #cecece;
    cursor: pointer;
    background: #ededed;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f4f4f4), color-stop(100%, #ededed));
    background: -moz-linear-gradient(top, #f4f4f4 0%, #ededed 100%);
    background: -ms-linear-gradient(top, #f4f4f4 0%, #ededed 100%);
}
.item:hover .item-0,
.item:hover .item-1 {
    border: 1px solid #afafaf;
}
/* content styles */

.item-0,
.item-1 {
    display: table;
}
.content-0,
.content-1 {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.content-0:before {
    font-family: sans-serif;
    font-size: 12px;
    letter-spacing: 1px;
    color: #747474;
}
.content-1:before {
    font-family: sans-serif;
    font-size: 12px;
    letter-spacing: 1px;
    color: #747474;
}

Answer 1

好了4小时后再喝了2品脱的大饼干和一包饼干，我把它分类了。我不得不在我的缩略图周围添加一个环绕。然后我使用{position:relative;}应用了{display:inline-block;}。我在这方面比较新，但它有效，我的div显示在彼此之下，用于响应@media查询。如果我说废话，就要权衡。

     <div class="row">

           <!-- thumbnail 1 -->

     <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
     <div class="thumbnail-wrap">
                  <div class="item">
                <div class="item-0">
                <div class="content-0"><a href="ground-works.html"> <img src="img/thumbnails/1.jpg" alt="thumbnail"/></a><h1><a href="" class="btn btn-default" role="button" style="color:#308ac6;">Ground Works &rarr;</a></h1></div>
                </div>
                <div class="item-1">
                <div class="content-1"><a href="ground-works.html"><img src="img/thumbnails/thumb1-bk.png" alt="thumbnail" style="width:100%;"/></a><h1><a href="ground-works.html" class="btn btn-default" role="button">Ground Works &rarr;</a></h1></div>
        </div>
       </div>
       </div>
       </div>

                                <!--- CSS Code--->

      .thumbnail-wrap {
           padding: 20px;
           position: relative;
           width: 100%;
           height: 500px;
           background: #fff;
           display:inline-block;
           border: none;
           overflow: visible;}