Bootstrap响应式设计列打破

Question

我对媒体查询和响应式设计相对较新。我有一个两列的页面正文。在第1列中，我有一本书的照片。在第2列中，我有作者的姓名和描述。

当我将窗口缩小到手机大小时，我希望作者的名字出现在照片上方，并且说明会显示在照片下方。

这是如何实现的？附件是我刚才描述的示例图像。

Answer 1

这是一个Bootstrap友好的方法：

<div class="container">
<div class="row">
   <div class="a col-xs-12 col-sm-12 col-md-8 col-lg-8 col-md-push-4 col-lg-push-4">Author</div>
   <div class="b col-xs-12 col-sm-12 col-md-4 col-lg-4"><img src="//placehold.it/460x340" class="img-responsive"></div>
   <div class="c col-xs-12 col-sm-12 col-md-8 col-lg-8 col-md-push-4 col-lg-push-4">Description</div>
</div>
</div>

CSS：

@media (min-width: 992px) {
    .container {
        position: relative;
     }
    .b {
        position: absolute;
        top: 0;
    }
    .a, .c {
        float: none;
    }
}

演示：http://bootply.com/107543

Answer 2

你可以尝试一些位置技巧：绝对的 查看我的小提琴：http://jsfiddle.net/Ln5vm/

<div class="content">
    <div class="author">Auhtor</div>
    <div class="photo">Photo image</div>
    <div class="subtitle">Subtitle</div>
</div>

.content{
    position: relative;
}

.author,
.subtitle{
    margin-left: 150px;
    font-size: 14px;
}

.photo{
    position: absolute;
    left: 0;
    top: 0;
    width: 130px;
    height: 130px;
    border: 1px solid #333;
    text-align: center;    
}
@media screen and (max-width: 768px){
    .photo{
        position: static;
        margin: 10px 0;
    }

    .author,
    .subtitle{
        margin-left: 0;
    }
}