Switching the order of block elements with CSS

Question

Short Story Let s say my HTML is already set in stone   lt div id  quot blockA quot  gt Block A lt  div gt   lt div id  quot blockB quot  gt Block B lt  div gt   lt div id  quot blockC quot  gt Block C lt  div gt   It will look like this  ------------   Block A    ------------   Block B    ------------   Block C    ------------  Now I want to switch the order of the blocks  How can I do that with only CSS  ------------   Block C    ------------   Block A    ------------   Block B    ------------  I m aware there s hacky solutions such as using position absolute  but this doesn t preserve the effective use of the display block property  That is  blocks push other blocks downward when they grow in size  Long Story When user uses a computer to view my webpage  the blocks are displayed in this order   General info  Event schedule  iPhone app advertisement  The iPhone app advertisement is placed last because it s not terribly important to computer users  A small percentage of computer users will whip out their phone and install the app  If a mobile user comes to this site  the iPhone app advertisement should be the most important thing on the page  Therefore  it should be moved to the top   iPhone app advertisement General info  Event schedule   I would like iPhone and computer users to share the same HTML  but have a CSS media query switch the order of the blocks   media only screen and  max-device-width  480px        blockC            magic order switching

User · Answer

Possible in CSS3  http   www w3 org TR css3-writing-modes  writing-mode  Why not change the orders of the tags  Your HTML page isn t made out of stone  are they

User · Answer

lt div id  container  gt       lt div id  a  gt Block A lt  div gt       lt div id  b  gt Block B lt  div gt       lt div id  c  gt Block C lt  div gt   lt  div gt    lets say the height of a block is 100px   container      position relative  height  300px    a   b   c      position absolute  height  100px   c              top  0px    b              top  100px    a              top  200px

User · Answer

Hows this for low tech     put the ad at the top and bottom and use media queries to display none as appropriate   If the ad wasn t too big  it wouldn t add too much size to the download  you could even customise where the ad sent you for iPhone pc

User · Answer

I known this is old  but I found a easier solution and it works on ie10  firefox and chrome    lt div id  wrapper  gt     lt div id  one  gt One lt  div gt     lt div id  two  gt Two lt  div gt     lt div id  three  gt Three lt  div gt   lt  div gt     This is the css    wrapper  display table    one  display table-footer-group    three  display table-header-group     And the result    Three   Two   One    I found it here

User · Answer

This method worked for me without flexbox    x000D   x000D   blockA  x000D   blockB  x000D   blockC   x000D      border  1px solid black  x000D      padding  20px  x000D    x000D   x000D   x000D   reverseOrder  x000D   blockA  x000D   blockB  x000D   blockC   x000D      -webkit-transform  rotate 180deg   x000D         -moz-transform  rotate 180deg   x000D          -ms-transform  rotate 180deg   x000D           -o-transform  rotate 180deg   x000D              transform  rotate 180deg   x000D    x000D   lt div class  reverseOrder  gt  x000D       lt div id  blockA  gt Block A lt  div gt  x000D       lt div id  blockB  gt Block B lt  div gt  x000D       lt div id  blockC  gt Block C lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I managed to do it with CSS display  table-   I haven t tested with more than 3 blocks though   fiddle

User · Answer

As has already been suggested  Flexbox is the answer - particularly because you only need to support a single modern browser  Mobile Safari   See  http   jsfiddle net thirtydot hLUHL   You can remove the -moz- prefixed properties if you like  I just left them in for future readers    x000D   x000D       blockContainer   x000D          display  -webkit-box  x000D          display  -moz-box  x000D          display  box  x000D           x000D          -webkit-box-orient  vertical  x000D          -moz-box-orient  vertical  x000D          box-orient  vertical  x000D        x000D       blockA   x000D          -webkit-box-ordinal-group  2  x000D          -moz-box-ordinal-group  2  x000D          box-ordinal-group  2  x000D        x000D       blockB   x000D          -webkit-box-ordinal-group  3  x000D          -moz-box-ordinal-group  3  x000D          box-ordinal-group  3  x000D        x000D       lt div id  blockContainer  gt  x000D           lt div id  blockA  gt Block A lt  div gt  x000D           lt div id  blockB  gt Block B lt  div gt  x000D           lt div id  blockC  gt Block C lt  div gt  x000D       lt  div gt  x000D   x000D   x000D

User · Answer

HTML    lt div id  blockC second-order  gt Block C lt  div gt   lt div id  blockA  gt Block A lt  div gt   lt div id  blockB  gt Block B lt  div gt   lt div id  blockC first-order  gt Block C lt  div gt    CSS    second-order        display  none      media only screen and  max-device-width  480px          first-order             display  none                second-order             display  block             I think this is non-stupid solution becouse repeating content is no problem in the most of cases and in your case if it is advertisment you would repeat not a lot of content   I ve answers on this question althought one year passed  becouse I was searching for solution  I read this and got this idea

User · Answer

Here is a  simple as possible  example  for changing the order of div-elements  when resizing the browser window     lt  DOCTYPE html gt   lt html gt     lt head gt       lt title gt foobar lt  title gt       lt style gt         media screen and  max-width 300px            parent            display flex            flex-flow  column                     a order 2            c order 1            b order 3                lt  style gt     lt  head gt     lt body gt       lt div id  parent  gt         lt div id  a  gt one lt  div gt         lt div id  b  gt two lt  div gt         lt div id  c  gt three lt  div gt       lt  div gt     lt  body gt   lt  html gt    Example  http   jsfiddle net devnull qyroxexv   change window-width to see the effect of changing the order of the divs

User · Answer

You could mess with the margins  http   jsfiddle net zV2p4   But you would probably be better off using position  absolute  This does not change display  block  but it will make the width auto  To fix this  make the divs width  100

User · Answer

Update  Two lightweight CSS solutions   Using flex  flex-flow and order   Example1  Demo Fiddle      body          display flex          flex-flow  column             blockA          order 4             blockB          order 3             blockC          order 2          Alternatively  reverse the Y scale   Example2  Demo Fiddle  body      -webkit-transform  scaleY -1       transform  scaleY -1     div      -webkit-transform  scaleY -1       transform  scaleY -1

[html] Switching the order of block elements with CSS

Examples related to html

Examples related to css