Items order in flexbox container - html

Question

I'm trying to build media query, which will be working like on the sketch. Any suggestion?
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
background-color: lightblue;
width: 100%;
padding: .5rem;
box-sizing: border-box;
}
.name {
background-color: white;
padding: 1rem;
margin: .25rem;
flex-basis: 40px
}
.options {
display: flex;
flex-direction: row;
}
.option {
background-color: white;
padding: 1rem;
margin: .25rem;
flex-basis: 80px;
}
.action {
background-color: white;
padding: 1rem;
margin: .25rem;
}
#media (max-width: 350px){
.name {order: 1}
.action {order: 2}
.options {order: 3}
.container {
flex-direction: column;
flex-wrap: wrap;
}
}
<div class="container">
<div class="name">Lorem ipsum</div>
<div class="options">
<div class="option">2</div>
<div class="option">3</div>
<div class="option">4</div>
</div>
<div class="action">
5
</div>
</div>
I have already started, but I'm not really satisfied :). I need something more stable, as I will want to use it here later.
https://codepen.io/danzawadzki/pen/mwPYMz
At this moment I'm changing order and flex-direction in media query, but it's not good enough. Box number 1 will contain name of the segment, so it should have fixed width. There will be multiple items like that in one column, so I would prefer to keep it looks clean with same proportions.

Answer 1

Use this may be it will work for you
#media (max-width: 350px){
.options {order: 3; flex:0 0 100%;}
.container {
flex-wrap: wrap;
}
}

Answer 2

If you change your #media and remove flex-direction: column and add flex-basis: 100% to the option, it will flow as your image shows
#media (max-width: 350px){
.options {
order: 1; flex-basis: 100%;
}
.container {
flex-wrap: wrap;
}
}
Note, I also removed the .name and .action rules, as they are not necessary
Fiddle demo
Stack snippet
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
background-color: lightblue;
width: 100%;
padding: .5rem;
box-sizing: border-box;
}
.name {
background-color: white;
padding: 1rem;
margin: .25rem;
flex-basis: 40px
}
.options {
display: flex;
flex-direction: row;
}
.option {
background-color: white;
padding: 1rem;
margin: .25rem;
flex-basis: 80px;
}
.action {
background-color: white;
padding: 1rem;
margin: .25rem;
}
#media (max-width: 350px){
.options {
order: 1; flex-basis: 100%;
}
.container {
flex-wrap: wrap;
}
}
<div class="container">
<div class="name">Lorem ipsum</div>
<div class="options">
<div class="option">2</div>
<div class="option">3</div>
<div class="option">4</div>
</div>
<div class="action">
5
</div>
</div>
Updated
By setting .options { flex-grow: 1; } and .option { flex: 1 1 80px; }, you can have the options/option elements to fill the remaining space on wider screens
Fiddle demo 2
Stack snippet 2
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
background-color: lightblue;
width: 100%;
padding: .5rem;
box-sizing: border-box;
}
.name {
background-color: white;
padding: 1rem;
margin: .25rem;
flex-basis: 40px
}
.options {
flex-grow: 1;
display: flex;
}
.option {
background-color: white;
padding: 1rem;
margin: .25rem;
flex: 1 1 80px;
}
.action {
background-color: white;
padding: 1rem;
margin: .25rem;
}
#media (max-width: 350px){
.options {
order: 1; flex-basis: 100%;
}
.container {
flex-wrap: wrap;
}
}
<div class="container">
<div class="name">Lorem ipsum</div>
<div class="options">
<div class="option">2</div>
<div class="option">3</div>
<div class="option">4</div>
</div>
<div class="action">
5
</div>
</div>