javascript - how to swap div with one another in mobile view css -

for clear view have drawn 3 diferent images showing status of divs in desktop, in mobile view , i'm trying in mobile view.

1. current status of divs in desktop view.

html

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

2. after media query mobile device making both divs full width.

3. , i'm trying get

solution come placing divs changing position in html floating property 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 works, on mobile view after clearing floats. in cms wish css if possible other way around.

problem : make both div of full width (in mobile media queries) then, recent articles div appears first , article listing how can articles listing first after recent posts ?

you have options depends on browser client want use:

for older browsers, according this answer can use table layout reorder divs:

#wrapper   { display: table; } #firstdiv  { display: table-footer-group; } #seconddiv { display: table-header-group; } 

for newer browsers can use flexbox specify order

#wrapper   { display: flex; } #firstdiv  { order: 1; } #seconddiv { order: 2; }