1

For clear view i have drawn three diferent images showing my status of divs in desktop, in mobile view and what i'm trying to get in mobile view.

1. This is current status of divs in desktop view. enter image description here

HTML

<div id="wrapper">
    <div id="left-nav">recent posts</div>
    <div id="main">articles listing</div>
</div>

2. What i get after media query for mobile device making both divs full width. enter image description here

3. And this is what i'm trying to get enter image description here

Solution i come up with are placing divs changing position in html with floating property like below.

<div id="wrapper">
    <div id="main" style="float:right;">articles listing</div>
    <div id="left-nav" style="float:left;">recent posts</div>
</div>

And this works, on mobile view after clearing floats. But this is in some CMS so i wish to get it with css if possible other way around.

Problem : as i make both div of full width (in mobile with media queries) then, the recent articles div appears first and then article listing but how can i get Articles listing first then after recent posts ?

Suman KC
  • 3,478
  • 4
  • 30
  • 42
  • @suvroc it's a strange comment, It's just about swapping position of a div with other, Ok, `id="wrapper" => class="row"` , `id="left-nav" => class="col-md-4"` and `id="main" => class="col-md-8"` Now answer me how do you do with this ? With bootstrap also, if you even assign for mobile grid, the divs gets on the position as it is. How do you swap below div with upper div. – Suman KC Jul 08 '15 at 11:40
  • Yes, of course, it won't directly answer your question (so it is not an answer), but this is only my advice. This systems is flexible and useful across different browser – suvroc Jul 08 '15 at 11:46
  • BTW, I have mentioned in question that i'm working on some `CMS` platform, so it takes time to convert all those into bootstrap. and i have used bootstrap before and you might have known from my comment above. Thank you !! – Suman KC Jul 08 '15 at 11:50
  • @suvroc also i have updated question with more colorful images, please check once. – Suman KC Jul 08 '15 at 12:09
  • What browser do you use? Or for what browser do you want to write it – suvroc Jul 08 '15 at 12:20

1 Answers1

5

You have some options depends on what browser do your client want to use:

For older browsers, according to this answer you can use table layout to reorder your divs:

#wrapper   { display: table; }
#firstDiv  { display: table-footer-group; }
#secondDiv { display: table-header-group; }

For newer browsers you can use FlexBox to specify order

#wrapper   { display: flex; }
#firstDiv  { order: 1; }
#secondDiv { order: 2; }
Community
  • 1
  • 1
suvroc
  • 3,058
  • 1
  • 15
  • 29
  • With the `display:table` strategy, as the '#firstDiv` and `#secondDiv` were floated left or left-right. The **float must be removed** (`float:none`) to work `table-footer-group/table-header-group`. – Suman KC Jul 27 '15 at 03:55