手机上的div顺序

Question

我有一个页面（使用bootstrap3）在浏览器上看起来像这样（第1张图片）。

在手机上看起来像这样（第2张图片）

但我想要的是在手机上按照以下顺序设置div，在浏览器中保持相同的顺序...... 搜索框 地图 搜索过滤器 搜索结果

提前致谢

Answer 1

基于Possible to achieve this Mobile/Desktop layout using Bootstrap? (or other grid)并使用嵌套（http://getbootstrap.com/css/#grid-nesting）

<强> CSS

.floatright{float:right;}
@media (max-width: 992px)
{    
    .floatright{float:none;}
}  

<强> HTML

<div class="container">
            <div class="row">
                <div class="col-md-8">
                <div class="row">
                <div class="col-md-12" style="background-color:aqua;">Search box</div>
                <div class="col-md-12" style="background-color:yellow;">Map</div>
                </div>
                </div>
                <div class="col-md-4 floatright" style="background-color:red; height:200px;"> Search Filter</div>

                <div class="col-md-8" style="background-color:green;"> Search search results</div>

            </div>
</div>