Order div on mobile

Question

I have a page (using bootstrap3) that looks like this (1st image) in browsers.

It looks like this (second image) on mobile phones

But I want divs in the following order on mobile phones to store orders the same in browsers ...... SEARCH LINE CARD SEARCH FILTER SEARCH RESULTS

Thank you in advance

Answer 1

Based on Is it possible to achieve this Mobile / Desktop layout using Bootstrap? (or another grid) and using nesting ( 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>