I think something like that is what you're looking for: link
I'll explain a little. I used flexbox to sort the different layers and media query to relocate them according to the size of the screen.
If you look at the example, I apply the display: flex property to the parent layer to indicate that it should behave like flexbox, as well as the property flex-direction: column so that the daughter layers are aligned vertically. Then, to each child layer I add the attribute order with the desired order.
.section { display:flex; flex-direction:column; }
.nav { border:solid 1px red; order:1; }
.articulos { border:solid 1px blue; order:2; }
.aside { border:solid 1px green; order:3; }
Finally, I use the media query to tell the 'articles' and 'aside' classes to reverse their order when the screen is less than 600px.
@media (max-width: 600px) {
.articulos { order:3; }
.aside { order:2; }
}
Edit:
If what you want is that only article 3 moves, you can remove the elements 'article1', 'article2' and 'article3' out of the 'article' class. Then you treat the independent orders, instead of grouped.
.section { display:flex; flex-direction:column; }
.nav { border:solid 1px red; order:1; }
.articulo1 { border:solid 1px blue; order:2; }
.articulo2 { border:solid 1px yellow; order:3 }
.articulo3 { border:solid 1px black; order:4 }
.aside { border:solid 1px green; order:5; }
@media (max-width: 600px) {
.articulo3 { order:5; }
.aside { order:4; }
}
<html>
<body>
<div class="contenedor">
<div class="header">
<div class="logo"></div>
</div>
<section class="section">
<nav class="nav">
<a href="">uno</a>
<a href="">dos</a>
<a href="">tres</a>
</nav>
<div class="articulo1">art1</div>
<div class="articulo2">art2</div>
<div class="articulo3">art3</div>
<aside class="aside">
<div class="otro">otro1</div>
<div class="otro">otro2</div>
</aside>
</section>
</div>
</body>
</html>