html - モバイルでの div の順序

Question

ブラウザでこの(最初の画像)のようなページ(bootstrap3を使用)があります。

携帯だとこんな感じ(画像2枚目)

しかし、私が望むのは、ブラウザーで同じ順序を維持しながら、モバイルで次の順序で 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>