Bootstrap在移动设备中将一个元素移到另一个元素下面

Question

我的网站布局如下，并使用自适应Bootstrap构建。

现在，当我在移动设备中查看它时，它按以下顺序排列：

1. HEADER
2. FORM
3. 促销
4. 信息
5. FOOTER

但是，我不希望促销功能低于移动设备的表单。相反，我需要信息部分来自表单，然后是促销部分，然后是页脚。

有没有办法使用@media查询来实现这一目标？

Answer 1

我认为，如果您可以控制促销区的高度，这个例子可以帮助您：

http://jsfiddle.net/vXb95/

<div id="header" class="bordered">header</div>

<div class="content">
    <div id="form" class="bordered">form</div>    
    <div id="info" class="bordered">infomation</div>
    <div id="promotion" class="bordered" >promotion</div>
</div>

<div id="footer" class="bordered">footer</div>



.bordered{
    border:1px solid #333;
    text-align: center;
    min-height: 50px;
    padding: 10px;
    margin-bottom: 10px;
}

.content{
    position:relative;
}

#form{
    margin-right: 35%;
}

#promotion{
    position: absolute;
    right: 0;
    top: 0;
    width: 30%;
}

@media screen and (max-width: 400px) {
    #promotion{
        position: static;
        width: auto;
    }

    #form{
        margin-right: 0;
    }
}

Answer 2

Live Demo

这样做的一种愚蠢方法是复制促销功能部分并通过媒体查询显示/隐藏它们：

HTML

<div id="header">header</div>
<div id="form">form</div>
<div id="promotion">promotion</div>
<div id="info">info</div>
<div id="promotion2">promotion</div>
<div id="footer">footer</div>

CSS

#promotion2 { display: none; }

@media (max-width: 400px) {
    #promotion { display: none; }
    #promotion2 { display: block; }
}