CODEWITHSUNDEEP
htmlcss
Raman Singh
Raman Singh

Reputation: 161

Possible to swap position of div elements using CSS?

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.

Upvotes: 2

Views: 5084

Answers (4)

Muteking
Muteking

Reputation: 1513

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>

Upvotes: 1

SW4
SW4

Reputation: 71150

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);
}

Upvotes: 5

zanderwar
zanderwar

Reputation: 3730

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.

Upvotes: 0

Bhargav Modi
Bhargav Modi

Reputation: 2655

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.

Upvotes: 0

Related Questions