CSS and Div Positionning

Question

I got a problem with positioning, I need to show Element 2 before Element 1. It is because of a PHP traitement, php code of the second element is executed at the end but I need to show it in first in my page Ex :

<div class="Element1">
   Text after Element 2
</div>
<div class="Element2">
   Text before Element 1
</div>

Answer 1

Wrap them in a container and you could make use of CSS3 Flexbox.

That way you only have to change the order. In fact just change the order on one div (Element2) and it will automatically switch. You could also use column-reverse to reverse the order of the entire list.

Something like this:

#container {
    width: 240px; height: 240px;
    border: 1px solid gray;
    display: flex;
    flex-direction: column; 
    /* flex-direction: column-reverse; */
    /* use column-reverse if needed to reverse the entire list */
}

.Element1, .Element2 {
    height: 100px;
    margin: 8px;
}

.Element1 {
    order: 2;
    background-color: #00f;
}

.Element2 {
    order: 1;
    background-color: #f00;
}

<div id="container">
  <div class="Element1">
     Text after Element 2
  </div>
  <div class="Element2">
     Text before Element 1
  </div>  
</div>