手机上的div顺序

Question

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

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

但我想要的是让 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>