jquery - Bootstrap : Floating Image between other elements

Question

<div id="container">
    <div class="row">
    <div class="col-sm-6 col-xs-12 image">Image</div>
    <div class="col-sm-6 col-xs-12 title">Title</div>
    <div class="col-sm-6 col-xs-12 description"> Description </div>    
    <div class="col-sm-6 col-xs-12 button">Button</div>
</div>

对于较小的设备，我尝试将标题 float 在图片上方，将描述和按钮 float 在图片下方。这看起来很简单，但我似乎做对了

http://jsfiddle.net/mxptxszx/

Answer 1

您可以将标题的位置设置为绝对位置，并将 padding-top(与您的 .title 高度相同)添加到 .row

Demo

@media screen and (max-width: 600px) {
    .title {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
    }

    .row {
        padding-top: 100px;
    }
}