How to move positions of divs using css

Question

How can I make an element visually switch position with another element using CSS? For example, if I have this HTML markup:

<html>
 <body>
    <div class="div1">Div1</div>
    <div class="div2">Div2</div>
    <div class="div3">Div3</div>
 </body>
</html>

I want .div3 and .div1 to switch places. How can I do this using CSS?

score 4 · Answer 1 · answered Oct 19 '16 at 12:51

4

You can do it using flexbox's order property:

.flex {
  display: flex;
}
.flex > div {
  width: 100px;
  text-align: center;
  border: 1px solid #ccc;
}
.div1 {order: 3;}
.div2 {order: 2;}
.div3 {order: 1;}

<div class="flex">
  <div class="div1">Div1</div>
  <div class="div2">Div2</div>
  <div class="div3">Div3</div>
</div>

Preview:

answered Oct 19 '16 at 12:51

Praveen Kumar Purushothaman

164,888
24
203
252

Thanks @praveen Kumar but how to do it without using flex? – UAK Oct 19 '16 at 12:55
1

why do you want to do it without flex? Divs should be aligned in the same line? – Fabrizio Calderan Oct 19 '16 at 12:56
@fcalderan i have parent div whose display property value is table and i then arranged all of its children as columns. – UAK Oct 19 '16 at 13:01
@UAK Flex is the only thing that allows you to change the order of elements... AFAIK. – Praveen Kumar Purushothaman Oct 19 '16 at 13:06
@PraveenKumar we can do without fles, see https://jsfiddle.net/vsfcgfe6/ – Leo the lion Oct 19 '16 at 13:13
For reference read [here](http://stackoverflow.com/questions/7425665/switching-the-order-of-block-elements-with-css) – Leo the lion Oct 19 '16 at 13:14
@Leothelion FlexBox seems better than that. – Praveen Kumar Purushothaman Oct 19 '16 at 13:21
I just gave this link as op wants to without flex, m not considering which one is better as for me i think the way is better by which we get our solution, isn't it :) – Leo the lion Oct 19 '16 at 13:24

How to move positions of divs using css

1 Answers1