Switching flex items from row to column alignment - css

Question

I have a 'card' like html component, that it displays this way:
+------+-----------------+-------+
| 1 | 2 | 3 |
+------+-----------------+-------+
And when I go under the 720px I want that became like this:
+------+-------------------------+
| | 2 |
| 1 +-------------------------+
| | 3 |
+------+-------------------------+
I am having difficulties to figure out how can I achieve this with flexbox. I am wondering if it is the right solution for this kind of problem.
the initial state, is currently like this:
<div class="card">
<div class="status"></div>
<div class="title">Tryout.it</div>
<div class="details">156 emails</div>
<div class="action"><button>go</div>
</div>
and my CSS something like this:
.card {
margin: 10px;
min-width: 320px;
min-height: 42px;
background-color: white;
border: 1px solid #eee;
border-radius: 6px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding: 9px 10px;
}
.card .status {
width: 30px;
height: 24px;
}
.card .title {
flex-grow: 1;
}

Answer 1

You cannot achieve this with flexbox with your current HTML structure.
(In the future you can use the grid layout for this, but at the moment it is not supported.)
However, if you place 2 and 3 in a container you can do this:
.card {
margin: 10px;
border: 1px solid #eee;
border-radius: 6px;
display: flex;
justify-content: space-between;
padding: 9px 10px;
}
.card .avatar {
width: 30px;
height: 24px;
}
.card .container {
flex-grow: 1;
display: flex;
flex-wrap: wrap;
}
.card .container .name {
width: 50%;
}
.card .container .presentation {
flex-grow: 1;
}
#media (max-width: 720px) {
.card .container .name {
width: 100%;
}
}
<div class="card">
<div class="avatar">
x
</div>
<div class="container">
<div class="name">Mr. Potato</div>
<div class="presentation">Hi!</div>
</div>
</div>

Answer 2

You can use CSS media query to apply a different style your div's at a certain screen size.
#media screen and (max-width: 720px) {
.css-class {
}
#css-id {
}
}

Answer 3

#ciaoben, Since you disappeared after asking you question, I'll provide an answer based upon the logic that the .title and .details blocks are meant to be blocks 2 and 3 from your diagram and that the .action is meant to be a fourth block on the opposite side.
Simply put, you need another layer for your HTML structure before you can apply the CSS to adjust it. You would wrap the blocks you want to have the appearance of altered in another DIV.
Once you have the HTML structure updated, it's a simple matter of applying a #media query to adjust the appearance at the desired screen size.
Please see my example below. Note: I updated your CSS to a more streamlined flexbox approach. Further, it applis display: flex to the .action block because, as I noted above, you don't identify it at all.
.card {
margin: 10px;
min-width: 320px;
min-height: 42px;
background-color: white;
border: 1px solid #eee;
border-radius: 6px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding: 9px 10px;
}
.card .status {
width: 30px;
}
.card .stretchit, .card .action {
-webkit-flex: 1;
flex: 1;
}
#media screen and (min-width: 720px) {
.card .stretchit {
display: flex;
}
.card .title, .card .details {
-webkit-flex: 1;
flex: 1;
}
}
<div class="card">
<div class="status"></div>
<div class="stretchit">
<div class="title">Tryout.it</div>
<div class="details">156 emails</div>
</div>
<div class="action"><button>go</button></div>
</div>