HTML Element Style How to - Order div blocks

Question

We would like to know how to order div blocks.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.blocks-order {<!--  w w w  .  j  ava 2 s .c om-->
    width: 90%;
    display: box;
    display: -webkit-box;
    display: -moz-box;
    padding: 10px;
    background-color: #EEE;
    border: 1px solid #d6d6d6;
    border-radius: 2px;
}
.blocks-order > div {
    width: 25%;
    margin-right: 10px;
    padding: 12px;
    background-color: #CCC;
    border-radius: 2px;
}
.blocks-order .block-1 {
    background-color: #DDD;
    color: #fff;
    -ms-flex-order: 2;                /* Internet Explorer 10 */
    -moz-box-ordinal-group: 2;        /* Firefox */
    -webkit-box-ordinal-group: 2;     /* Safari and Chrome */
    box-ordinal-group: 2;
}
</style>
</head>
<body>
  <section class="blocks-order">
    <div class="block-1">Block 1</div>
    <div class="block-2">Block 2</div>
    <div class="block-3">Block 3</div>
  </section>
</body>
</html>

The code above is rendered as follows: