Html 引导在移动设备中将一个元素移动到另一个元素之下

我有以下布局为我的网站，是建立使用响应引导

现在，当我在移动设备中查看它时，它的顺序如下：

标题

形式

晋升

信息

页脚

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

有没有办法通过

@media

查询来实现这一点

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

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

HTML

---

我想，如果你能控制促销块的高度，这个例子可以帮助你：

标题
形式
信息
晋升
页脚
.边界{
边框：1px实心#333；
文本对齐：居中；
最小高度：50px；
填充：10px；
边缘底部：10px；
}
.内容{
位置：相对位置；
}
#形式{
保证金权利：35%；
}
#晋升{
位置：绝对位置；
右：0；
排名：0；
宽度：30%；
}
@媒体屏幕和屏幕（最大宽度：400px）{
#晋升{
位置：静态；
宽度：自动；
}
#形式{
右边距：0；
}
}

我想，如果你能控制促销块的高度，这个例子可以帮助你：

标题
形式
信息
晋升
页脚
.边界{
边框：1px实心#333；
文本对齐：居中；
最小高度：50px；
填充：10px；
边缘底部：10px；
}
.内容{
位置：相对位置；
}
#形式{
保证金权利：35%；
}
#晋升{
位置：绝对位置；
右：0；
排名：0；
宽度：30%；
}
@媒体屏幕和屏幕（最大宽度：400px）{
#晋升{
位置：静态；
宽度：自动；
}
#形式{
右边距：0；
}
}

与媒体查询相比，只需使用适当的引导程序来显示/隐藏每个查询就更简单了div@koala_dev你能举例说明你的意见吗。我不能完全理解媒体查询，只需使用适当的引导程序来显示/隐藏每个查询就更简单了div@koala_dev你能举例说明你的意见吗。我不完全明白

<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>

<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;
    }
}