How can I reorder my divs using only CSS

Question

Given a template where the HTML cannot be modified because of other requirements  how is it possible to display  rearrange  a div above another div when they are not in that order in the HTML  Both divs contain data that varies in height and width    lt div id  wrapper  gt       lt div id  firstDiv  gt          Content to be below in this situation      lt  div gt       lt div id  secondDiv  gt          Content to be above in this situation      lt  div gt   lt  div gt  Other elements   Hopefully it is obvious that the desired result is   Content to be above in this situation Content to be below in this situation Other elements   When the dimensions are fixed it easy to position them where needed  but I need some ideas for when the content is variable  For the sake of this scenario  please just consider the width to be 100  on both   I am specifically looking for a CSS-only solution  and it will probably have to be met with other solutions if that doesn t pan out     There are other elements following this  A good suggestion was mentioned given the limited scenario I demonstrated mdash given that it might be the best answer  but I am looking to also make sure elements following this aren t impacted

User · Answer

Or set an absolute position to the element and work off the margins by declaring them from the edge of the page rather than the edge of the object  Use   as its more suitable for other screen sizes ect  This is how i overcame the issue   Thanks  hope its what your looking for

User · Answer

A CSS-only solution  works for IE10       use Flexbox s order property   Demo  http   jsfiddle net hqya7q6o 596    x000D   x000D   flex   display  flex  flex-direction  column    x000D   a   order  2    x000D   b   order  1    x000D   c   order  3    x000D   lt div id  flex  gt  x000D      lt div id  a  gt A lt  div gt  x000D      lt div id  b  gt B lt  div gt  x000D      lt div id  c  gt C lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    More info  https   developer mozilla org en-US docs Web CSS order

User · Answer

CSS really shouldn t be used to restructure the HTML backend  However  it is possible if you know the height of both elements involved and are feeling hackish  Also  text selection will be messed up when going between the divs  but that s because the HTML and CSS order are opposite    firstDiv   position  relative  top  YYYpx  height  XXXpx     secondDiv   position  relative  top  -XXXpx  height  YYYpx      Where XXX and YYY are the heights of firstDiv and secondDiv respectively  This will work with trailing elements  unlike the top answer

User · Answer

This can be done with CSS only    Please check my answer to this similar question   https   stackoverflow com a 25462829 1077230  I don t want to double post my answer but the short of it is that the parent needs to become a flexbox element  Eg     only using the webkit vendor prefix here     main       display  -webkit-box      display  -webkit-flex      display  flex      -webkit-box-orient  vertical      -webkit-flex-direction  column      flex-direction  column      -webkit-box-align  start      -webkit-align-items  flex-start      align-items  flex-start      Then  swap divs around by indicating their order with    main  gt  div one      -webkit-box-ordinal-group  2      -moz-box-ordinal-group  2      -ms-flex-order  2      -webkit-order  2      order  2      overflow visible      main  gt  div two      -webkit-box-ordinal-group  1      -moz-box-ordinal-group  1      -ms-flex-order  1      -webkit-order  1      order  1

User · Answer

A solution with a bigger browser support then the flexbox  works in IE 9     x000D   x000D   wrapper   x000D    -webkit-transform  scaleY -1   x000D    -ms-transform  scaleY -1   x000D    transform  scaleY -1   x000D    x000D   wrapper  gt      x000D    -webkit-transform  scaleY -1   x000D    -ms-transform  scaleY -1   x000D    transform  scaleY -1   x000D    x000D   lt div id  wrapper  gt  x000D       lt div id  firstDiv  gt  x000D          Content to be below in this situation x000D       lt  div gt  x000D       lt div id  secondDiv  gt  x000D          Content to be above in this situation x000D       lt  div gt  x000D   lt  div gt  x000D  Other elements x000D   x000D   x000D    In contrast to the display  table  solution this solution works when  wrapper has any amount of children

User · Answer

Just use flex for the parent div by specifying display  flex and flex-direction   column  Then use order to determine which of the child div comes first

User · Answer

I have a much better code  made by me  it is so big  just to show both things    create a 4x4 table and vertical align more than just one cell   It does not use any IE hack  no vertical-align middle  at all      It does not use for vertical centering display-table  display table-rom  display table-cell   It uses the trick of a container that has two divs  one hidden  position is not the correct but makes parent have the correct variable size   one visible just after the hidden but with top -50   so it is mover to correct position   See div classes that make the trick   BloqueTipoContenedor    BloqueTipoContenedor VerticalmenteCentrado      BloqueTipoContenido VerticalmenteCentrado Oculto      BloqueTipoContenido VerticalmenteCentrado Visible  Please sorry for using Spanish on classes names  it is because i speak spanish and this is so tricky that if i use English i get lost    The full code    lt  xml version  1 0  encoding  iso-8859-1   gt   lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 1  EN   http   www w3 org TR xhtml11 DTD xhtml11 dtd  gt   lt html gt   lt head gt   lt meta http-equiv  Content-Type  content  text html  charset iso-8859-1    gt   lt meta http-equiv  Content-Language  content  en    gt   lt meta name  language  content  en    gt   lt title gt Vertical Centering in CSS2 - Example  IE  FF  amp  Chrome tested  - This is so tricky    lt  title gt   lt style type  text css  gt   html body    margin 0px    padding 0px    width 100     height 100       div BloqueTipoTabla    display table margin 0px border 0px padding 0px width 100  height 100       div BloqueTipoFila AltoAjustadoAlContenido    display table-row margin 0px border 0px padding 0px width 100  height auto      div BloqueTipoFila AltoRestante    display table-row margin 0px border 0px padding 0px width 100  height 100       div BloqueTipoCelda AjustadoAlContenido    display table-cell margin 0px border 0px padding 0px width auto height auto      div BloqueTipoCelda RestanteAncho    display table-cell margin 0px border 0px padding 0px width 100  height auto      div BloqueTipoCelda RestanteAlto    display table-cell margin 0px border 0px padding 0px width auto height 100       div BloqueTipoCelda RestanteAnchoAlto    display table-cell margin 0px border 0px padding 0px width 100  height 100       div BloqueTipoContenedor    display block margin 0px border 0px padding 0px width 100  height 100  position relative      div BloqueTipoContenedor VerticalmenteCentrado    display block margin 0px border 0px padding 0px width 100  height auto position relative top 50       div BloqueTipoContenido VerticalmenteCentrado Oculto    display block margin 0px border 0px padding 0px width 100  height auto visibility hidden position relative top 50       div BloqueTipoContenido VerticalmenteCentrado Visible    display block margin 0px border 0px padding 0px width 100  height auto visibility visible position absolute top -50       lt  style gt   lt  head gt   lt body gt   lt h1 gt Vertical Centering in CSS2 - Example lt br   gt  IE  FF  amp  Chrome tested  lt br   gt This is so tricky    lt  h1 gt   lt div class  BloqueTipoTabla  style  margin 0px 0px 0px 25px width 75  height 66  border 1px solid blue   gt    lt div class  BloqueTipoFila AltoAjustadoAlContenido  gt     lt div class  BloqueTipoCelda AjustadoAlContenido  gt      1 1     lt  div gt     lt div class  BloqueTipoCelda AjustadoAlContenido  gt      1 2     lt  div gt     lt div class  BloqueTipoCelda RestanteAncho  gt      1 3     lt  div gt     lt div class  BloqueTipoCelda AjustadoAlContenido  gt      1 4     lt  div gt    lt  div gt    lt div class  BloqueTipoFila AltoAjustadoAlContenido  gt     lt div class  BloqueTipoCelda AjustadoAlContenido  gt      2 1     lt  div gt     lt div class  BloqueTipoCelda AjustadoAlContenido  gt      2 2     lt  div gt     lt div class  BloqueTipoCelda RestanteAncho  gt      2 3     lt  div gt     lt div class  BloqueTipoCelda AjustadoAlContenido  gt      2 4     lt  div gt   lt  div gt    lt div class  BloqueTipoFila AltoRestante  gt     lt div class  BloqueTipoCelda RestanteAlto  gt      lt div class  BloqueTipoContenedor  style  border 1px solid lime   gt       lt div class  BloqueTipoContenedor VerticalmenteCentrado  style  border 1px dotted red   gt        lt div class  BloqueTipoContenido VerticalmenteCentrado Oculto  gt       The cell  3 1        lt br   gt         amp nbsp   amp nbsp   amp nbsp         lt br   gt         amp nbsp   amp nbsp   amp nbsp         lt br   gt         amp nbsp   amp nbsp   amp nbsp         lt br   gt       Now amp nbsp is amp nbsp the amp nbsp highest amp nbsp one       lt  div gt        lt div class  BloqueTipoContenido VerticalmenteCentrado Visible  style  border 1px dotted blue   gt       The cell  3 1        lt br   gt         amp nbsp   amp nbsp   amp nbsp         lt br   gt         amp nbsp   amp nbsp   amp nbsp         lt br   gt         amp nbsp   amp nbsp   amp nbsp         lt br   gt       Now amp nbsp is amp nbsp the amp nbsp highest amp nbsp one       lt  div gt       lt  div gt      lt  div gt     lt  div gt     lt div class  BloqueTipoCelda RestanteAlto  gt      lt div class  BloqueTipoContenedor  style  border 1px solid lime   gt       lt div class  BloqueTipoContenedor VerticalmenteCentrado  style  border 1px dotted red   gt        lt div class  BloqueTipoContenido VerticalmenteCentrado Oculto  gt        This amp nbsp is lt br   gt cell amp nbsp  3 2        lt  div gt        lt div class  BloqueTipoContenido VerticalmenteCentrado Visible  style  border 1px dotted blue   gt        This amp nbsp is lt br   gt cell amp nbsp  3 2        lt  div gt       lt  div gt      lt  div gt     lt  div gt     lt div class  BloqueTipoCelda RestanteAnchoAlto  gt      lt div class  BloqueTipoContenedor  style  border 1px solid lime   gt       lt div class  BloqueTipoContenedor VerticalmenteCentrado  style  border 1px dotted red   gt        lt div class  BloqueTipoContenido VerticalmenteCentrado Oculto  gt        This is cell  3 3         lt br  gt        It is duplicated on source to make the trick to know its variable height        lt br   gt        First copy is hidden and second copy is visible        lt br  gt        Other cells of this row are not correctly aligned only on IE          lt  div gt        lt div class  BloqueTipoContenido VerticalmenteCentrado Visible  style  border 1px dotted blue   gt        This is cell  3 3         lt br  gt        It is duplicated on source to make the trick to know its variable height        lt br   gt        First copy is hidden and second copy is visible        lt br  gt        Other cells of this row are not correctly aligned only on IE          lt  div gt       lt  div gt      lt  div gt     lt  div gt     lt div class  BloqueTipoCelda RestanteAlto  gt      lt div class  BloqueTipoContenedor  style  border 1px solid lime   gt       lt div class  BloqueTipoContenedor VerticalmenteCentrado  style  border 1px dotted red   gt        lt div class  BloqueTipoContenido VerticalmenteCentrado Oculto  gt        This amp nbsp other is lt br   gt the cell amp nbsp  3 4        lt  div gt        lt div class  BloqueTipoContenido VerticalmenteCentrado Visible  style  border 1px dotted blue   gt        This amp nbsp other is lt br   gt the cell amp nbsp  3 4        lt  div gt       lt  div gt      lt  div gt     lt  div gt    lt  div gt    lt div class  BloqueTipoFila AltoAjustadoAlContenido  gt     lt div class  BloqueTipoCelda AjustadoAlContenido  gt      4 1     lt  div gt     lt div class  BloqueTipoCelda AjustadoAlContenido  gt      4 2     lt  div gt     lt div class  BloqueTipoCelda RestanteAncho  gt      4 3     lt  div gt     lt div class  BloqueTipoCelda AjustadoAlContenido  gt      4 4     lt  div gt    lt  div gt   lt  div gt   lt  body gt   lt  html gt

User · Answer

Well  with a bit of absolute positioning and some dodgy margin setting  I can get close  but it s not perfect or pretty    wrapper   position  relative  margin-top  4em     firstDiv   position  absolute  top  0  width  100      secondDiv   position  absolute  bottom  0  width  100       The  margin-top  4em  is the particularly nasty bit  this margin needs to be adjusted according to the amount of content in the firstDiv  Depending on your exact requirements  this might be possible  but I m hoping anyway that someone might be able to build on this for a solid solution   Eric s comment about JavaScript should probably be pursued

User · Answer

Here s a solution    lt style gt   firstDiv       position absolute  top 100      wrapper       position relative       But I suspect you have some content that follows the wrapper div

User · Answer

If you know  or can enforce the size for the to-be-upper element  you could use   position   absolute    In your css and give the divs their position   otherwise javascript seems the only way to go   fd   document getElementById   firstDiv     sd   document getElementById   secondDiv     fd parentNode removeChild  fd    sd parentNode insertAfter  fd  sd      or something similar   edit  I just found this which might be useful  w3 document css3 move-to

User · Answer

I was looking for a way to change the orders of the divs only for mobile version so then I can style it nicely  Thanks to nickf reply I got to make this piece of code which worked well for what I wanted  so i though of sharing it with you guys       changing the order of the sidebar so it goes after the content for mobile versions jQuery window  resize function        if   jQuery window  width    lt  480                 jQuery   main-content   insertBefore   sidebar              if   jQuery window  width    gt  480                 jQuery   sidebar   insertBefore   main-content              jQuery window  height       New height     jQuery window  width       New width

User · Answer

For CSS Only solution 1  Either height of wrapper should be fixed or 2  height of second div should be fixed

User · Answer

A CSS-only solution  works for IE10       use Flexbox s order property   Demo  http   jsfiddle net hqya7q6o 596    x000D   x000D   flex   display  flex  flex-direction  column    x000D   a   order  2    x000D   b   order  1    x000D   c   order  3    x000D   lt div id  flex  gt  x000D      lt div id  a  gt A lt  div gt  x000D      lt div id  b  gt B lt  div gt  x000D      lt div id  c  gt C lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    More info  https   developer mozilla org en-US docs Web CSS order

User · Answer

Or set an absolute position to the element and work off the margins by declaring them from the edge of the page rather than the edge of the object  Use   as its more suitable for other screen sizes ect  This is how i overcame the issue   Thanks  hope its what your looking for

User · Answer

If you just use css  you can use flex    x000D   x000D   price   x000D      display  flex  x000D      align-items  center  x000D      justify-content  center  x000D   x000D      flex-direction  row-reverse    revert horizontally x000D        flex-direction  column-reverse  revert vertically x000D    x000D   lt div class  price  gt  x000D         lt div gt first block lt  div gt  x000D         lt div gt second block lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

In your CSS  float the first div by left or right  Float the second div by left or right same as first  Apply clear  left or right the same as the above two divs for the second div   For example    firstDiv       float  left      secondDiv       float  left      clear  left

User · Answer

Well  with a bit of absolute positioning and some dodgy margin setting  I can get close  but it s not perfect or pretty    wrapper   position  relative  margin-top  4em     firstDiv   position  absolute  top  0  width  100      secondDiv   position  absolute  bottom  0  width  100       The  margin-top  4em  is the particularly nasty bit  this margin needs to be adjusted according to the amount of content in the firstDiv  Depending on your exact requirements  this might be possible  but I m hoping anyway that someone might be able to build on this for a solid solution   Eric s comment about JavaScript should probably be pursued

User · Answer

This can be done using Flexbox    Create a container that applies both display flex and flex-flow column-reverse    x000D   x000D     -- Where the Magic Happens --    x000D   x000D   container   x000D     x000D       Setup Flexbox    x000D    display  -webkit-box  x000D    display  -moz-box  x000D    display  -ms-flexbox  x000D    display  -webkit-flex  x000D    display  flex  x000D   x000D       Reverse Column Order    x000D    -webkit-flex-flow  column-reverse  x000D    flex-flow  column-reverse  x000D   x000D    x000D   x000D   x000D     -- Styling Only --    x000D   x000D   container  gt  div   x000D    background  red  x000D    color  white  x000D    padding  10px  x000D    x000D   x000D   container  gt  div last-of-type   x000D    background  blue  x000D    x000D   lt div class  container  gt  x000D     x000D     lt div class  first  gt  x000D   x000D       first x000D   x000D     lt  div gt  x000D     x000D     lt div class  second  gt  x000D   x000D      second x000D   x000D     lt  div gt  x000D     x000D   lt  div gt  x000D   x000D   x000D    Sources    https   css-tricks com using-flexbox  https   developer mozilla org en-US docs Web CSS flex-flow Browser compatibility

User · Answer

Negative top margins can achieve this effect  but they would need to be customized for each page   For instance  this markup      lt div class  product  gt   lt h2 gt Greatest Product Ever lt  h2 gt   lt p class  desc  gt This paragraph appears in the source code directly after the heading and will appear in the search results  lt  p gt   lt p class  sidenote  gt Note  This information appears in HTML after the product description appearing below  lt  p gt   lt  div gt       and this CSS      product   width  400px     desc   margin-top  5em     sidenote   margin-top  -7em         would allow you to pull the second paragraph above the first   Of course  you ll have to manually tweak your CSS for different description lengths so that the intro paragraph jumps up the appropriate amount  but if you have limited control over the other parts and full control over markup and CSS then this might be an option

User · Answer

It is easy with css  just use display block and z-index property  Here is an example   HTML    lt body gt       lt div class  wrapper  gt            lt div class  header  gt              header          lt  div gt            lt div class  content  gt              content          lt  div gt       lt  div gt   lt  body gt    CSS    wrapper                 header                 z-index 9001      display block                content                 z-index 9000                Edit  It is good to set some background-color to the div-s to see things properly

User · Answer

Negative top margins can achieve this effect  but they would need to be customized for each page   For instance  this markup      lt div class  product  gt   lt h2 gt Greatest Product Ever lt  h2 gt   lt p class  desc  gt This paragraph appears in the source code directly after the heading and will appear in the search results  lt  p gt   lt p class  sidenote  gt Note  This information appears in HTML after the product description appearing below  lt  p gt   lt  div gt       and this CSS      product   width  400px     desc   margin-top  5em     sidenote   margin-top  -7em         would allow you to pull the second paragraph above the first   Of course  you ll have to manually tweak your CSS for different description lengths so that the intro paragraph jumps up the appropriate amount  but if you have limited control over the other parts and full control over markup and CSS then this might be an option

User · Answer

move-wrap       display  table      table-layout  fixed     prevent some responsive bugs     width  100      set a width if u like        TODO  js-fallback IE7 if u like ms        move-down       display  table-footer-group      move-up       display  table-header-group

User · Answer

Here s a solution    lt style gt   firstDiv       position absolute  top 100      wrapper       position relative       But I suspect you have some content that follows the wrapper div

User · Answer

Well  with a bit of absolute positioning and some dodgy margin setting  I can get close  but it s not perfect or pretty    wrapper   position  relative  margin-top  4em     firstDiv   position  absolute  top  0  width  100      secondDiv   position  absolute  bottom  0  width  100       The  margin-top  4em  is the particularly nasty bit  this margin needs to be adjusted according to the amount of content in the firstDiv  Depending on your exact requirements  this might be possible  but I m hoping anyway that someone might be able to build on this for a solid solution   Eric s comment about JavaScript should probably be pursued

User · Answer

If you know  or can enforce the size for the to-be-upper element  you could use   position   absolute    In your css and give the divs their position   otherwise javascript seems the only way to go   fd   document getElementById   firstDiv     sd   document getElementById   secondDiv     fd parentNode removeChild  fd    sd parentNode insertAfter  fd  sd      or something similar   edit  I just found this which might be useful  w3 document css3 move-to

User · Answer

If you know  or can enforce the size for the to-be-upper element  you could use   position   absolute    In your css and give the divs their position   otherwise javascript seems the only way to go   fd   document getElementById   firstDiv     sd   document getElementById   secondDiv     fd parentNode removeChild  fd    sd parentNode insertAfter  fd  sd      or something similar   edit  I just found this which might be useful  w3 document css3 move-to

User · Answer

There is absolutely no way to achieve what you want through CSS alone while supporting pre-flexbox user agents  mostly old IE  -- unless    You know the exact rendered height of each element  if so  you can absolutely position the content    If you re dealing with dynamically generated content  you re out of luck  You know the exact number of these elements there will be   Again  if you need to do this for several chunks of content that are generated dynamically  you re out of luck  especially if there are more than three or so    If the above are true then you can do what you want by absolutely positioning the elements --   wrapper   position  relative     firstDiv   position  absolute  height  100px  top  110px     secondDiv   position  absolute  height  100px  top  0      Again  if you don t know the height want for at least  firstDiv  there s no way you can do  what you want via CSS alone   If any of this content is dynamic  you will have to use javascript

User · Answer

As others have said  this isn t something you d want to be doing in CSS  You can fudge it with absolute positioning and strange margins  but it s just not a robust solution  The best option in your case would be to turn to javascript  In jQuery  this is a very simple task       secondDiv   insertBefore   firstDiv      or more generically       swapMe   each function i  el          el  insertBefore   el  prev

User · Answer

move-wrap       display  table      table-layout  fixed     prevent some responsive bugs     width  100      set a width if u like        TODO  js-fallback IE7 if u like ms        move-down       display  table-footer-group      move-up       display  table-header-group

User · Answer

For CSS Only solution 1  Either height of wrapper should be fixed or 2  height of second div should be fixed

User · Answer

This solution uses only CSS and works with variable content   wrapper     display  table     firstDiv    display  table-footer-group     secondDiv   display  table-header-group

User · Answer

This can be done using Flexbox    Create a container that applies both display flex and flex-flow column-reverse    x000D   x000D     -- Where the Magic Happens --    x000D   x000D   container   x000D     x000D       Setup Flexbox    x000D    display  -webkit-box  x000D    display  -moz-box  x000D    display  -ms-flexbox  x000D    display  -webkit-flex  x000D    display  flex  x000D   x000D       Reverse Column Order    x000D    -webkit-flex-flow  column-reverse  x000D    flex-flow  column-reverse  x000D   x000D    x000D   x000D   x000D     -- Styling Only --    x000D   x000D   container  gt  div   x000D    background  red  x000D    color  white  x000D    padding  10px  x000D    x000D   x000D   container  gt  div last-of-type   x000D    background  blue  x000D    x000D   lt div class  container  gt  x000D     x000D     lt div class  first  gt  x000D   x000D       first x000D   x000D     lt  div gt  x000D     x000D     lt div class  second  gt  x000D   x000D      second x000D   x000D     lt  div gt  x000D     x000D   lt  div gt  x000D   x000D   x000D    Sources    https   css-tricks com using-flexbox  https   developer mozilla org en-US docs Web CSS flex-flow Browser compatibility

User · Answer

Negative top margins can achieve this effect  but they would need to be customized for each page   For instance  this markup      lt div class  product  gt   lt h2 gt Greatest Product Ever lt  h2 gt   lt p class  desc  gt This paragraph appears in the source code directly after the heading and will appear in the search results  lt  p gt   lt p class  sidenote  gt Note  This information appears in HTML after the product description appearing below  lt  p gt   lt  div gt       and this CSS      product   width  400px     desc   margin-top  5em     sidenote   margin-top  -7em         would allow you to pull the second paragraph above the first   Of course  you ll have to manually tweak your CSS for different description lengths so that the intro paragraph jumps up the appropriate amount  but if you have limited control over the other parts and full control over markup and CSS then this might be an option

User · Answer

CSS really shouldn t be used to restructure the HTML backend  However  it is possible if you know the height of both elements involved and are feeling hackish  Also  text selection will be messed up when going between the divs  but that s because the HTML and CSS order are opposite    firstDiv   position  relative  top  YYYpx  height  XXXpx     secondDiv   position  relative  top  -XXXpx  height  YYYpx      Where XXX and YYY are the heights of firstDiv and secondDiv respectively  This will work with trailing elements  unlike the top answer

User · Answer

Well  with a bit of absolute positioning and some dodgy margin setting  I can get close  but it s not perfect or pretty    wrapper   position  relative  margin-top  4em     firstDiv   position  absolute  top  0  width  100      secondDiv   position  absolute  bottom  0  width  100       The  margin-top  4em  is the particularly nasty bit  this margin needs to be adjusted according to the amount of content in the firstDiv  Depending on your exact requirements  this might be possible  but I m hoping anyway that someone might be able to build on this for a solid solution   Eric s comment about JavaScript should probably be pursued

User · Answer

Negative top margins can achieve this effect  but they would need to be customized for each page   For instance  this markup      lt div class  product  gt   lt h2 gt Greatest Product Ever lt  h2 gt   lt p class  desc  gt This paragraph appears in the source code directly after the heading and will appear in the search results  lt  p gt   lt p class  sidenote  gt Note  This information appears in HTML after the product description appearing below  lt  p gt   lt  div gt       and this CSS      product   width  400px     desc   margin-top  5em     sidenote   margin-top  -7em         would allow you to pull the second paragraph above the first   Of course  you ll have to manually tweak your CSS for different description lengths so that the intro paragraph jumps up the appropriate amount  but if you have limited control over the other parts and full control over markup and CSS then this might be an option

User · Answer

This can be done with CSS only    Please check my answer to this similar question   https   stackoverflow com a 25462829 1077230  I don t want to double post my answer but the short of it is that the parent needs to become a flexbox element  Eg     only using the webkit vendor prefix here     main       display  -webkit-box      display  -webkit-flex      display  flex      -webkit-box-orient  vertical      -webkit-flex-direction  column      flex-direction  column      -webkit-box-align  start      -webkit-align-items  flex-start      align-items  flex-start      Then  swap divs around by indicating their order with    main  gt  div one      -webkit-box-ordinal-group  2      -moz-box-ordinal-group  2      -ms-flex-order  2      -webkit-order  2      order  2      overflow visible      main  gt  div two      -webkit-box-ordinal-group  1      -moz-box-ordinal-group  1      -ms-flex-order  1      -webkit-order  1      order  1

User · Answer

If you just use css  you can use flex    x000D   x000D   price   x000D      display  flex  x000D      align-items  center  x000D      justify-content  center  x000D   x000D      flex-direction  row-reverse    revert horizontally x000D        flex-direction  column-reverse  revert vertically x000D    x000D   lt div class  price  gt  x000D         lt div gt first block lt  div gt  x000D         lt div gt second block lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

There is absolutely no way to achieve what you want through CSS alone while supporting pre-flexbox user agents  mostly old IE  -- unless    You know the exact rendered height of each element  if so  you can absolutely position the content    If you re dealing with dynamically generated content  you re out of luck  You know the exact number of these elements there will be   Again  if you need to do this for several chunks of content that are generated dynamically  you re out of luck  especially if there are more than three or so    If the above are true then you can do what you want by absolutely positioning the elements --   wrapper   position  relative     firstDiv   position  absolute  height  100px  top  110px     secondDiv   position  absolute  height  100px  top  0      Again  if you don t know the height want for at least  firstDiv  there s no way you can do  what you want via CSS alone   If any of this content is dynamic  you will have to use javascript

User · Answer

As others have said  this isn t something you d want to be doing in CSS  You can fudge it with absolute positioning and strange margins  but it s just not a robust solution  The best option in your case would be to turn to javascript  In jQuery  this is a very simple task       secondDiv   insertBefore   firstDiv      or more generically       swapMe   each function i  el          el  insertBefore   el  prev

User · Answer

It is easy with css  just use display block and z-index property  Here is an example   HTML    lt body gt       lt div class  wrapper  gt            lt div class  header  gt              header          lt  div gt            lt div class  content  gt              content          lt  div gt       lt  div gt   lt  body gt    CSS    wrapper                 header                 z-index 9001      display block                content                 z-index 9000                Edit  It is good to set some background-color to the div-s to see things properly

User · Answer

With CSS3 flexbox layout module  you can order divs    wrapper     display  flex    flex-direction  column     firstDiv     order  2      lt div id  wrapper  gt     lt div id  firstDiv  gt      Content1    lt  div gt     lt div id  secondDiv  gt      Content2    lt  div gt   lt  div gt

User · Answer

Here s a solution    lt style gt   firstDiv       position absolute  top 100      wrapper       position relative       But I suspect you have some content that follows the wrapper div

User · Answer

As others have said  this isn t something you d want to be doing in CSS  You can fudge it with absolute positioning and strange margins  but it s just not a robust solution  The best option in your case would be to turn to javascript  In jQuery  this is a very simple task       secondDiv   insertBefore   firstDiv      or more generically       swapMe   each function i  el          el  insertBefore   el  prev

User · Answer

Little late to the party  but you can also do this    lt div style  height  500px  width  500px   gt    lt div class  bottom  style  height  250px  width  500px  background  red  margin-top  250px   gt  lt  div gt    lt div class  top  style  height  250px  width  500px  background  blue  margin-top  -500px   gt  lt  div gt

User · Answer

Just use flex for the parent div by specifying display  flex and flex-direction   column  Then use order to determine which of the child div comes first

User · Answer

Ordering only for mobile and keep the native order for desktop     html  lt div gt     lt div class  quot gridInverseMobile1 quot  gt First lt  div gt     lt div class  quot gridInverseMobile1 quot  gt Second lt  div gt   lt  div gt      css  media only screen and  max-width  960px       gridInverseMobile1       order  2      -webkit-order  2         gridInverseMobile2       order  1      -webkit-order  1         Result  Desktop  First   Second Mobile  Second   First  source  https   www w3schools com cssref css3 pr order asp

User · Answer

Ordering only for mobile and keep the native order for desktop     html  lt div gt     lt div class  quot gridInverseMobile1 quot  gt First lt  div gt     lt div class  quot gridInverseMobile1 quot  gt Second lt  div gt   lt  div gt      css  media only screen and  max-width  960px       gridInverseMobile1       order  2      -webkit-order  2         gridInverseMobile2       order  1      -webkit-order  1         Result  Desktop  First   Second Mobile  Second   First  source  https   www w3schools com cssref css3 pr order asp

User · Answer

I have a simple way to do this    lt  --  HTML  -- gt    lt div class  wrapper  gt        lt div class  sm-hide  gt This content hides when at your layouts chosen breaking point  lt  div gt        lt div gt Content that stays in place lt  div gt        lt div class  sm-show  gt This content is set to show at your layouts chosen breaking point  lt  div gt    lt  div gt    lt  --  CSS  -- gt        sm-hide  display block        sm-show  display none     media  max-width 598px         sm-hide  display none        sm-show  display block

User · Answer

With CSS3 flexbox layout module  you can order divs    wrapper     display  flex    flex-direction  column     firstDiv     order  2      lt div id  wrapper  gt     lt div id  firstDiv  gt      Content1    lt  div gt     lt div id  secondDiv  gt      Content2    lt  div gt   lt  div gt

User · Answer

I was looking for a way to change the orders of the divs only for mobile version so then I can style it nicely  Thanks to nickf reply I got to make this piece of code which worked well for what I wanted  so i though of sharing it with you guys       changing the order of the sidebar so it goes after the content for mobile versions jQuery window  resize function        if   jQuery window  width    lt  480                 jQuery   main-content   insertBefore   sidebar              if   jQuery window  width    gt  480                 jQuery   sidebar   insertBefore   main-content              jQuery window  height       New height     jQuery window  width       New width

User · Answer

If you know  or can enforce the size for the to-be-upper element  you could use   position   absolute    In your css and give the divs their position   otherwise javascript seems the only way to go   fd   document getElementById   firstDiv     sd   document getElementById   secondDiv     fd parentNode removeChild  fd    sd parentNode insertAfter  fd  sd      or something similar   edit  I just found this which might be useful  w3 document css3 move-to

User · Answer

I have a much better code  made by me  it is so big  just to show both things    create a 4x4 table and vertical align more than just one cell   It does not use any IE hack  no vertical-align middle  at all      It does not use for vertical centering display-table  display table-rom  display table-cell   It uses the trick of a container that has two divs  one hidden  position is not the correct but makes parent have the correct variable size   one visible just after the hidden but with top -50   so it is mover to correct position   See div classes that make the trick   BloqueTipoContenedor    BloqueTipoContenedor VerticalmenteCentrado      BloqueTipoContenido VerticalmenteCentrado Oculto      BloqueTipoContenido VerticalmenteCentrado Visible  Please sorry for using Spanish on classes names  it is because i speak spanish and this is so tricky that if i use English i get lost    The full code    lt  xml version  1 0  encoding  iso-8859-1   gt   lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 1  EN   http   www w3 org TR xhtml11 DTD xhtml11 dtd  gt   lt html gt   lt head gt   lt meta http-equiv  Content-Type  content  text html  charset iso-8859-1    gt   lt meta http-equiv  Content-Language  content  en    gt   lt meta name  language  content  en    gt   lt title gt Vertical Centering in CSS2 - Example  IE  FF  amp  Chrome tested  - This is so tricky    lt  title gt   lt style type  text css  gt   html body    margin 0px    padding 0px    width 100     height 100       div BloqueTipoTabla    display table margin 0px border 0px padding 0px width 100  height 100       div BloqueTipoFila AltoAjustadoAlContenido    display table-row margin 0px border 0px padding 0px width 100  height auto      div BloqueTipoFila AltoRestante    display table-row margin 0px border 0px padding 0px width 100  height 100       div BloqueTipoCelda AjustadoAlContenido    display table-cell margin 0px border 0px padding 0px width auto height auto      div BloqueTipoCelda RestanteAncho    display table-cell margin 0px border 0px padding 0px width 100  height auto      div BloqueTipoCelda RestanteAlto    display table-cell margin 0px border 0px padding 0px width auto height 100       div BloqueTipoCelda RestanteAnchoAlto    display table-cell margin 0px border 0px padding 0px width 100  height 100       div BloqueTipoContenedor    display block margin 0px border 0px padding 0px width 100  height 100  position relative      div BloqueTipoContenedor VerticalmenteCentrado    display block margin 0px border 0px padding 0px width 100  height auto position relative top 50       div BloqueTipoContenido VerticalmenteCentrado Oculto    display block margin 0px border 0px padding 0px width 100  height auto visibility hidden position relative top 50       div BloqueTipoContenido VerticalmenteCentrado Visible    display block margin 0px border 0px padding 0px width 100  height auto visibility visible position absolute top -50       lt  style gt   lt  head gt   lt body gt   lt h1 gt Vertical Centering in CSS2 - Example lt br   gt  IE  FF  amp  Chrome tested  lt br   gt This is so tricky    lt  h1 gt   lt div class  BloqueTipoTabla  style  margin 0px 0px 0px 25px width 75  height 66  border 1px solid blue   gt    lt div class  BloqueTipoFila AltoAjustadoAlContenido  gt     lt div class  BloqueTipoCelda AjustadoAlContenido  gt      1 1     lt  div gt     lt div class  BloqueTipoCelda AjustadoAlContenido  gt      1 2     lt  div gt     lt div class  BloqueTipoCelda RestanteAncho  gt      1 3     lt  div gt     lt div class  BloqueTipoCelda AjustadoAlContenido  gt      1 4     lt  div gt    lt  div gt    lt div class  BloqueTipoFila AltoAjustadoAlContenido  gt     lt div class  BloqueTipoCelda AjustadoAlContenido  gt      2 1     lt  div gt     lt div class  BloqueTipoCelda AjustadoAlContenido  gt      2 2     lt  div gt     lt div class  BloqueTipoCelda RestanteAncho  gt      2 3     lt  div gt     lt div class  BloqueTipoCelda AjustadoAlContenido  gt      2 4     lt  div gt   lt  div gt    lt div class  BloqueTipoFila AltoRestante  gt     lt div class  BloqueTipoCelda RestanteAlto  gt      lt div class  BloqueTipoContenedor  style  border 1px solid lime   gt       lt div class  BloqueTipoContenedor VerticalmenteCentrado  style  border 1px dotted red   gt        lt div class  BloqueTipoContenido VerticalmenteCentrado Oculto  gt       The cell  3 1        lt br   gt         amp nbsp   amp nbsp   amp nbsp         lt br   gt         amp nbsp   amp nbsp   amp nbsp         lt br   gt         amp nbsp   amp nbsp   amp nbsp         lt br   gt       Now amp nbsp is amp nbsp the amp nbsp highest amp nbsp one       lt  div gt        lt div class  BloqueTipoContenido VerticalmenteCentrado Visible  style  border 1px dotted blue   gt       The cell  3 1        lt br   gt         amp nbsp   amp nbsp   amp nbsp         lt br   gt         amp nbsp   amp nbsp   amp nbsp         lt br   gt         amp nbsp   amp nbsp   amp nbsp         lt br   gt       Now amp nbsp is amp nbsp the amp nbsp highest amp nbsp one       lt  div gt       lt  div gt      lt  div gt     lt  div gt     lt div class  BloqueTipoCelda RestanteAlto  gt      lt div class  BloqueTipoContenedor  style  border 1px solid lime   gt       lt div class  BloqueTipoContenedor VerticalmenteCentrado  style  border 1px dotted red   gt        lt div class  BloqueTipoContenido VerticalmenteCentrado Oculto  gt        This amp nbsp is lt br   gt cell amp nbsp  3 2        lt  div gt        lt div class  BloqueTipoContenido VerticalmenteCentrado Visible  style  border 1px dotted blue   gt        This amp nbsp is lt br   gt cell amp nbsp  3 2        lt  div gt       lt  div gt      lt  div gt     lt  div gt     lt div class  BloqueTipoCelda RestanteAnchoAlto  gt      lt div class  BloqueTipoContenedor  style  border 1px solid lime   gt       lt div class  BloqueTipoContenedor VerticalmenteCentrado  style  border 1px dotted red   gt        lt div class  BloqueTipoContenido VerticalmenteCentrado Oculto  gt        This is cell  3 3         lt br  gt        It is duplicated on source to make the trick to know its variable height        lt br   gt        First copy is hidden and second copy is visible        lt br  gt        Other cells of this row are not correctly aligned only on IE          lt  div gt        lt div class  BloqueTipoContenido VerticalmenteCentrado Visible  style  border 1px dotted blue   gt        This is cell  3 3         lt br  gt        It is duplicated on source to make the trick to know its variable height        lt br   gt        First copy is hidden and second copy is visible        lt br  gt        Other cells of this row are not correctly aligned only on IE          lt  div gt       lt  div gt      lt  div gt     lt  div gt     lt div class  BloqueTipoCelda RestanteAlto  gt      lt div class  BloqueTipoContenedor  style  border 1px solid lime   gt       lt div class  BloqueTipoContenedor VerticalmenteCentrado  style  border 1px dotted red   gt        lt div class  BloqueTipoContenido VerticalmenteCentrado Oculto  gt        This amp nbsp other is lt br   gt the cell amp nbsp  3 4        lt  div gt        lt div class  BloqueTipoContenido VerticalmenteCentrado Visible  style  border 1px dotted blue   gt        This amp nbsp other is lt br   gt the cell amp nbsp  3 4        lt  div gt       lt  div gt      lt  div gt     lt  div gt    lt  div gt    lt div class  BloqueTipoFila AltoAjustadoAlContenido  gt     lt div class  BloqueTipoCelda AjustadoAlContenido  gt      4 1     lt  div gt     lt div class  BloqueTipoCelda AjustadoAlContenido  gt      4 2     lt  div gt     lt div class  BloqueTipoCelda RestanteAncho  gt      4 3     lt  div gt     lt div class  BloqueTipoCelda AjustadoAlContenido  gt      4 4     lt  div gt    lt  div gt   lt  div gt   lt  body gt   lt  html gt

User · Answer

In your CSS  float the first div by left or right  Float the second div by left or right same as first  Apply clear  left or right the same as the above two divs for the second div   For example    firstDiv       float  left      secondDiv       float  left      clear  left

User · Answer

I have a simple way to do this    lt  --  HTML  -- gt    lt div class  wrapper  gt        lt div class  sm-hide  gt This content hides when at your layouts chosen breaking point  lt  div gt        lt div gt Content that stays in place lt  div gt        lt div class  sm-show  gt This content is set to show at your layouts chosen breaking point  lt  div gt    lt  div gt    lt  --  CSS  -- gt        sm-hide  display block        sm-show  display none     media  max-width 598px         sm-hide  display none        sm-show  display block

User · Answer

This solution uses only CSS and works with variable content   wrapper     display  table     firstDiv    display  table-footer-group     secondDiv   display  table-header-group

User · Answer

Little late to the party  but you can also do this    lt div style  height  500px  width  500px   gt    lt div class  bottom  style  height  250px  width  500px  background  red  margin-top  250px   gt  lt  div gt    lt div class  top  style  height  250px  width  500px  background  blue  margin-top  -500px   gt  lt  div gt

User · Answer

Here s a solution    lt style gt   firstDiv       position absolute  top 100      wrapper       position relative       But I suspect you have some content that follows the wrapper div

User · Answer

A solution with a bigger browser support then the flexbox  works in IE 9     x000D   x000D   wrapper   x000D    -webkit-transform  scaleY -1   x000D    -ms-transform  scaleY -1   x000D    transform  scaleY -1   x000D    x000D   wrapper  gt      x000D    -webkit-transform  scaleY -1   x000D    -ms-transform  scaleY -1   x000D    transform  scaleY -1   x000D    x000D   lt div id  wrapper  gt  x000D       lt div id  firstDiv  gt  x000D          Content to be below in this situation x000D       lt  div gt  x000D       lt div id  secondDiv  gt  x000D          Content to be above in this situation x000D       lt  div gt  x000D   lt  div gt  x000D  Other elements x000D   x000D   x000D    In contrast to the display  table  solution this solution works when  wrapper has any amount of children

User · Answer

As others have said  this isn t something you d want to be doing in CSS  You can fudge it with absolute positioning and strange margins  but it s just not a robust solution  The best option in your case would be to turn to javascript  In jQuery  this is a very simple task       secondDiv   insertBefore   firstDiv      or more generically       swapMe   each function i  el          el  insertBefore   el  prev

[html] How can I reorder my divs using only CSS?

Examples related to html

Examples related to css