Can I change the vertical order of divs by CSS?

If you have no issues with older browsers, you can use Flexbox .

Assuming you have a parent element of these three other blocks, it looks like this:

.elemento-pai {
  display: flex;
  flex-direction: column;
}

.d2 {
  order: 3;
}

.d3 {
  order: 2;
}

In this way, changing the position elements and preserving their dynamics (one keeps pushing the other down, etc.).

Example: FIDDLE

You can force elements to position themselves wherever they want. If you take this path it is best that all the elements are positioned, and that you have control over their dimensions so they do not cross over each other.

Here's a suggestion: link

.d1, .d3 {
    color: #cc9900;
    font-family: Arial;
    font-size: 11px;
    position: absolute; # para os poder mover livremente

}
.d2 {
    margin-top: 20px; # para deixar espaço para os outros elementos
    font-family: "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
}
/* PArte nova */
.d3 {
    top: 5px;
    left: 120px;
}
.d1 {
    top: 5px;
    left: 7px;
}