For DNK

HTML

<div class="wrapper">
    <header> HEADER</header>
    <aside class="lbar"> LEFT LEFT LEFT </aside>
    <main class="content">CONTENT</main>
    <aside class="rbar"> RIGHT RIGHT</aside>
    <footer> FOOTER</footer>
</div>

CSS

.wrapper{
    max-width: 1160px;
    margin: 0 auto;
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
footer,header{
    background-color: blue;
    height: 80px;
	flex: 0 0 100%;
}
aside.lbar, aside.rbar{
    width: 25%;
  background-color: yellow;  
      height:300px;
}
main.content{
    background-color: green;
    height:300px;
	flex: 1 0 auto;
}

aside.rbar{
  background-color: #ff0000;
  flex: 0 0 25%;
}
aside.lbar{
  background-color: yellow;
  flex: 0 0 25%; 
}
@media (max-width: 600px){
    aside.lbar, aside.rbar{
    	flex: 1 0 100%;
	}
	aside.lbar{
		order: 2
	}
	aside.rbar{
		order:1
	}
	footer{
		order: 3
	}
	main.content{
		order: 4
	}
}