Saved X
Google login
SignUp with Email
X

How can I reorder my divs using only CSS?

theindreshverma ( Added  Sep 19, 01:35 am )
Login

Html css order property

<!DOCTYPE html>
<html>
<head>
   <title>Reorder my divs</title>
   <style>
   .example {
        display: -webkit-flex;
        display: flex;
        font-family: sans-serif
    }
    .example div {
        width: 300px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        color: #fff;
        font-size: 30px
    }
    div#red {
        order: 2;
        background-color: red
    }
    div#green {
        order: 3;
        background-color: green
    }
    div#black {
        order: 1;
        background-color: black
    }
    div#blue {
        order: 4;
        background-color: blue
    }
   </style>
</head>
<body>
<h2>Reorder my divs</h2>
<div class="example">
    <div id="red">1</div>
    <div id="green">2</div>
    <div id="black">3</div>
    <div id="blue">4</div>
</div>
</body>
</html>

Sourcecode Tags

More Sourcecodes

More Sourcecodes