CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Suman KC
Suman KC

Reputation: 3528

how to swap div with one another in mobile view css

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 ?

Upvotes: 1

Views: 3605

Answers (1)

suvroc
suvroc

Reputation: 3062

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; }

Upvotes: 5

Related Questions