Order of div on mobile

Question

I have a page(using bootstrap3) that looks like this(1st image) on browsers. enter image description here

It looks like this(2nd image) on mobiles enter image description here

But what I want is to have the divs in the following order on mobiles keeping orders same in browsers...... SEARCHBOX MAP SEARCH FILTER SEARCH RESULTS

Thanks in advance

That's all. All CSSs are defined inline. Nothing in the external sheet. — Nishan Hitang, Sep 18 '13 at 07:00
Then it is working fine. I mean in the browsers it is visible to me as the second image which you have posted above. even if I resize. — Mr_Green, Sep 18 '13 at 07:01
I want the order of the divs to be like this...SEARCHBOX-MAP-SEARCH FILTER-SEARCH RESULTS.... Current code orders div in this order SEARCHBOX-MAP- SEARCH RESULTS -SEARCH FILTER — Nishan Hitang, Sep 18 '13 at 07:05
you can do that by changing HTML. Can't you change the html? — Mr_Green, Sep 18 '13 at 07:06
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/37570/discussion-between-reccur-nishan-and-mr-green) — Nishan Hitang, Sep 18 '13 at 07:08
possible duplicate of [Possible to achieve this Mobile/Desktop layout using Bootstrap? (or other grid)](http://stackoverflow.com/questions/18542303/possible-to-achieve-this-mobile-desktop-layout-using-bootstrap-or-other-grid) — Bass Jobsen, Sep 18 '13 at 08:07

score 3 · Accepted Answer · edited May 23 '17 at 12:07

3

Based on Possible to achieve this Mobile/Desktop layout using Bootstrap? (or other grid) and with the use of 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>

edited May 23 '17 at 12:07

Community

1
1

answered Sep 18 '13 at 08:20

Bass Jobsen

48,736
16
143
224

Thanks so much... I was wondering if we could have a solution without using media query. – Nishan Hitang Sep 19 '13 at 04:43
I don't think so. You will have to look to the col-*-push-*/col-*-pull-* or col-*-offset-* classes. You could apply this classes on all grids ecept from the xs-grid. Try http://bootply.com/81911 as start point to find a solution which fits your needs. These alternatives all have the same result for the xs-grid (mobile < 768px) but not on the larger grids. NOTE These Bootstrap's classes will also use media queries. – Bass Jobsen Sep 19 '13 at 09:36

Order of div on mobile

1 Answers1