Possible to swap position of div elements using CSS?

Question

In my example there are two div, I just wanted that first div come down after second div using css let suppose below example

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="div1" >

This is first div.
</div>
<div class="div2" >
    This is second div.
</div>
</body>
</html>

Above code give output like below

This is first div.

This is second div.

but i wanted output should be

This is second div.

This is first div.

Don't use margin top:20px because text in mycase will bigger then in example.

We cannot understand what you are asking for without some code — kapantzak, Dec 02 '14 at 08:08
Why not change the HTML to have the `div` with `class="div2"` first? KEEP IT SIMPLE! — Rahul Desai, Dec 02 '14 at 08:11
i can modify that content of project but can add CSS file to the project, so thats why asking this type of question — Raman Singh, Dec 02 '14 at 08:14
@user2431786 are you able to access the javascript? -- if so you can swap it after page loads but it would be ugly and noticeable on slower connections — zanderwar, Dec 02 '14 at 08:15
cann't use jquery or javascript @Gustonez and with postion absolute u have to set margin which is not best way when text of div changes dynamically — Raman Singh, Dec 02 '14 at 08:19

SW4 · Answer 1 · 2014-12-02T08:29:19.687

5

Both the below are pure CSS, and support any number of items without requiring alteration to display properties.

Using flex, flex-flow and order:

Example1: Demo Fiddle

    body {
        display:flex;
        flex-flow: column;
    }
    .div1 {
        order:2;
    }
    .div2 {
        order:1;
    }

Alternatively, reverse the Y scale:

Example2: Demo Fiddle

body {
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
}
div {
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
}

edited Dec 02 '14 at 08:29

answered Dec 02 '14 at 08:18

SW4

69,876
20
132
137

@Gustonez - actually example 2 does: http://caniuse.com/#search=transform (IE9+), and example 1 does, using the `-ms-` vendor prefix – SW4 Dec 02 '14 at 08:30
Didn't know about flex-column. Interesting answer. +1 for version 2. But version 1 - `flex-flow` is supported only in IE11, Chrome21, FF28, Opera12 and not supported in Safari, so consider not using that approach – Medet Tleukabiluly Dec 02 '14 at 08:33
interesting... also this may help him to understand more about flex: http://css-tricks.com/snippets/css/a-guide-to-flexbox/ – Ghassan Elias Dec 02 '14 at 08:34

Muteking · Accepted Answer · 2015-01-19T16:52:05.250

1

Here you go. Just use a table. You must work on three elements, a container and the two containing elements.

#container {
    display:table;
    width: 100%;
}
#first{
     display:table-footer-group;
 }

#second{
     display:table-header-group;
 }

<div id ="container">
    <div id = "first">This is the first div</div>
    <div id = "second">This is the second div</div>
</div>

edited Jan 19 '15 at 16:52

answered Dec 02 '14 at 08:16

Muteking

1,465
5
18
31

score 0 · Answer 3 · edited May 23 '17 at 10:26

0

As pointed out by many posters, yes there are CSS options.

However if you were inclined to do so; jQuery/Javascript is also a solution.

Please see: jquery: switch Elements in DOM if you wish to take this route.

edited May 23 '17 at 10:26

Community

1
1

answered Dec 02 '14 at 08:10

zanderwar

3,440
3
28
46

1

Appears so, see @Bhargav's answer. – zanderwar Dec 02 '14 at 08:19
There are actually multiple approaches in CSS, which allow for any number of items (unlike tabulated solutions) whilst still supporting the original display properties (below) – SW4 Dec 02 '14 at 08:23

score 0 · Answer 4 · answered Dec 02 '14 at 08:16

now for HTML and CSS from below code

#example {display: table; width: 100%; }

#block-1 {display: table-footer-group; } /* Will be displayed at the bottom of the pseudo-table */
#block-2 {display: table-row-group;    } /* Will be displayed in the middle */
#block-3 {display: table-header-group; } /* Will be displayed at the top */

<div id="example">
    <div id="block-1">First</div>
    <div id="block-2">Second</div>
    <div id="block-3">Third</div>
</div>

Output

Third Second First.

Possible to swap position of div elements using CSS?

4 Answers4

Example1: Demo Fiddle

Example2: Demo Fiddle