Swap DIV position with CSS only

Question

I m trying to swap two divs  locations for responsive design  the site looks different depending on width of the browser good for mobile    Right now I have something like this    lt div id  first div  gt  lt  div gt   lt div id  second div  gt  lt  div gt    But would it be possible to swap their placements to make it look like second div is first  using CSS only  The HTML stays the same  I ve tried using floats and stuff but it doesn t seem to work the way I want it to  I don t want to use absolute positioning because the heights of the divs are always changing  Are there any solutions  or is there just no way to do this

User · Answer

Using CSS only     blockContainer   display  -webkit-box  display  -moz-box  display  box   -webkit-box-orient  vertical  -moz-box-orient  vertical  box-orient  vertical     blockA   -webkit-box-ordinal-group  2  -moz-box-ordinal-group  2  box-ordinal-group  2     blockB   -webkit-box-ordinal-group  3  -moz-box-ordinal-group  3  box-ordinal-group  3        lt div id  blockContainer  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  gt Block C lt  div gt   lt  div gt    http   jsfiddle net thirtydot hLUHL

User · Answer

Someone linked me this  What is the best way to move an element that  39 s on the top to the bottom in Responsive design   The solution in that worked perfectly  Though it doesn   t support old IE  that doesn   t matter for me  since I   m using responsive design for mobile  And it works for most mobile browsers   Basically  I had this    media  max-width  30em       container       display  -webkit-box      display  -moz-box      display  -ms-flexbox      display  -webkit-flex      display  flex      -webkit-box-orient  vertical      -moz-box-orient  vertical      -webkit-flex-direction  column      -ms-flex-direction  column      flex-direction  column         optional        -webkit-box-align  start      -moz-box-align  start      -ms-flex-align  start      -webkit-align-items  flex-start      align-items  flex-start          container  first div       -webkit-box-ordinal-group  2      -moz-box-ordinal-group  2      -ms-flex-order  2      -webkit-order  2      order  2          container  second div       -webkit-box-ordinal-group  1      -moz-box-ordinal-group  1      -ms-flex-order  1      -webkit-order  1      order  1          This worked better than floats for me  because I needed them stacked on top of each other and I had about five different divs that I had to swap around the position of

User · Answer

Assuming Nothing Follows Them  If these two div elements are basically your main layout elements  and nothing follows them in the html  then there is a pure HMTL CSS solution that takes the normal order shown in this fiddle and is able to flip it vertically as shown in this fiddle using one additional wrapper div like so   HTML   lt div class  wrapper flipit  gt      lt div id  first div  gt first div lt  div gt      lt div id  second div  gt second div lt  div gt   lt  div gt    CSS   flipit       position  relative     flipit  first div       position  absolute      top  100       width  100       This would not work if elements follow these div s  as this fiddle illustrates the issue if the following elements are not wrapped  they get overlapped by  first div   and this fiddle illustrates the issue if the following elements are also wrapped  the  first div changes position with both the  second div and the following elements   So that is why  depending on your use case  this method may or may not work    For an overall layout scheme  where all other elements exist inside the two div s  it can work  For other scenarios  it will not

User · Answer

assuming both elements have 50  width  here is what i used  css     parent       width  100       display  flex           child-1       width  50       margin-right  -50       margin-left  50       background   ff0         child-2       width  50       margin-right  50       margin-left  -50       background   0f0       html   lt div class  quot parent quot  gt     lt div class  quot child-1 quot  gt child1 lt  div gt     lt div class  quot child-2 quot  gt child2 lt  div gt   lt  div gt   example  https   jsfiddle net gzveri o6umhj53  btw  this approach works for any 2 nearby elements in a long list of elements  For example I have a long list of elements with 2 items per row and I want each 3-rd and 4-th element in the list to be swapped  so that it renders elements in a chess style  then I use these rules     parent  gt  div nth-child 4n 3        margin-right  -50       margin-left  50          parent  gt  div nth-child 4n 4        margin-right  50       margin-left  -50

User · Answer

In some cases you can just use the flex-box property order   Very simple    flex-item       order  2      See  https   css-tricks com almanac properties o order

User · Answer

This solution worked for me   Using a parent element like    parent-div       display flex      flex-direction  column-reverse      In my case I didn t have to change the css of the elements that I needed to switch

User · Answer

This question already has a great answer but in the spirit of exploring all possibilities here is another technique to reorder dom elements whilst still allowing them to take up their space  unlike the absolute positioning method   This method works in all modern browsers and IE9   basically any browser that supports display table  it has a drawback that it can only be used on a max of 3 siblings though     the html      lt div class  container  gt       lt div class  div1  gt 1 lt  div gt       lt div class  div2  gt 2 lt  div gt       lt div class  div3  gt 3 lt  div gt   lt  div gt     the css  container      display table         div1       display table-footer-group     div2       display table-header-group     div3       display table-row-group      This will reorder the elements from 1 2 3 to 2 3 1  Basically anything with the display set to table-header-group will be positioned at the top and table-footer-group at the bottom  Naturally table-row-group puts an element in the middle   This method is quick with good support and requires much less css than the flexbox approach so if you are only looking to swap a few items around for a mobile layout for example then dont rule out this technique   You can check out a live demo on codepen  http   codepen io thepixelninja pen eZVgLx

User · Answer

The accepted answer worked for most browsers but for some reason on iOS Chrome and Safari browsers the content that should have shown second was being hidden  I tried some other steps that forced content to stack on top of each other  and eventually I tried the following solution that gave me the intended effect  switch content display order on mobile screens   without bugs of stacked or hidden content    container     display flex    flex-direction  column-reverse      section1   section2     height  auto

[css] Swap DIV position with CSS only

Examples related to css

Examples related to responsive-design