Sort placement of the DIV in CSS

You can use Flexbox . It works as a flex container , able to sort and direct the children elements. To use it, you need to determine display: flex; and target according to the requirements you want, in your case flex-direction: column; , this sets the column ordering of your divs. By default, it always goes online.

After you apply this setting to container , you must add the order parameter to the children elements by setting the numeric value to the order you want to display your divs (this also applies to values negative).

.container { 
  display: flex; 
  flex-direction: column; 
}

.divum { 
  width: 100%;
  height: 200px;
  background: black;
  order: 2; 
}

.divdois {
  width: 100%;
  height: 200px;
  background: red;
  order: 1; 
}

<div class="container">
  <div class="divum"></div>
  <div class="divdois"></div>
</div>

There are other definitions that you can apply depending on your needs, on origamid there is great content about the subject. You can also see CSS-Tricks and MDN .

This solution only uses CSS and works with dynamic content

wrapper   { 
    display: table;
}
firstDiv  { 
    display: table-footer-group; 
}
secondDiv { 
    display: table-header-group; 
}

Or flex-box

/* -- Where the Magic Happens -- */

.container {
  
  /* Setup Flexbox */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  /* Reverse Column Order */
  -webkit-flex-flow: column-reverse;
  flex-flow: column-reverse;

}


/* -- Styling Only -- */

.container > div {
  background: red;
  color: white;
  padding: 10px;
}

.container > div:last-of-type {
  background: blue;
}

<div class="container">
  
  <div class="first">

     Primeira

  </div>
  
  <div class="second">

    Segunda

  </div>
  
</div>