html - 手机上的div顺序

Question

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

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

但我想要的是让 div 在手机上按以下顺序在浏览器中保持相同的顺序...... SEARCHBOX MAP SEARCH FILTER SEARCH RESULTS

提前致谢

Answer 1

基于可能使用 Bootstrap 实现此移动/桌面布局？（或其他网格）并使用嵌套（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>