re-organize flexbox with mediaqueries 1 - 2 into 2 -1 - html

Question

I am looking for made a responsive design with flexbox. But i have some issues to switch between my two views. Maybe someone have an idea how to solve this problem.
.box {
display: flex;
flex-wrap: wrap;
flex-direction: row-reverse;
}
.box>* {
flex: 1 1 160px;
border: 1px solid blue;
margin: 5px;
padding: 50px;
}
.flex-item {
border: 1px solid blue;
margin: 5px;
padding: 50px;
}
<article class="box">
<p class="a">box a lorem ipsum ipsum </p>
<p class="b">box b lorem ipsum ipsum </p>
<p class="c">box c lorem ipsum ipsum </p>
</article>

Answer 1

You can use CSS Grid with Media Queries. Please view the output in full screen and reduce it below the desired width i.e. 600px. I have explained the code in the comments.
Output:
.grid-container {
display: grid;
grid-template-columns: 2fr 1fr; /* 2 columns of 2 fractions and 1 fraction each */
grid-template-rows: 1fr 1fr; /* 2 rows of a fraction each */
}
.box-a {
grid-area: 1 / 1 / 2 / 2; /* Start at Row 1, Start at Column 1. End at Row 2, End at Column 2 */
}
.box-b {
grid-area: 1 / 2 / 3 / 3;
}
.box-c {
grid-area: 2 / 1 / 2 / 2;
}
#media (max-width: 600px) { /* Target for screens below width of 600px */
.box-b {
grid-area: 1 / 2 / 2 / 3;
}
.box-c {
grid-area: 2 / 1 / 3 / 3;
}
}
/* Snippet Styling */
.box-a {
background: tomato;
}
.box-b {
background: lightgreen;
}
.box-c {
background: lightblue;
}
.grid-container>div {
text-align: center;
color: #fff;
font-size: 3em;
font-family: sans-serif;
padding: 10%;
}
<div class="grid-container">
<div class="box-a"> A </div>
<div class="box-b"> <img src="http://placehold.it/100"> </div>
<div class="box-c"> C </div>
</div>