Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Swap DIV position with CSS only

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:

<div id="first_div"></div> <div id="second_div"></div> 

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?

like image 363
Dragonfly Avatar asked Jul 03 '13 18:07

Dragonfly


People also ask

How do I move a div to another?

With CSS properties, you can easily put two <div> next to each other in HTML. Use the CSS property float to achieve this. With that, add height:100px and set margin.

How do I move a div to the front?

Use the CSS z-index property. Elements with a greater z-index value are positioned in front of elements with smaller z-index values. Note that for this to work, you also need to set a position style ( position:absolute , position:relative , or position:fixed ) on both/all of the elements you want to order.

How do I move a div from left to right?

You can use “float:right” to move the div to the right, then you need to mention the div width to fulfill your task. With CSS “margin-left” you can move your div to the right.


2 Answers

Someone linked me this: What is the best way to move an element that'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.

like image 180
Dragonfly Avatar answered Sep 27 '22 20:09

Dragonfly


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; } 
like image 22
Jason Awbrey Avatar answered Sep 27 '22 21:09

Jason Awbrey