My three column responsive layout is not respecting flex order - html

Question

I want to make a three columns layout for my website using flexboxes.
However, my 'commentCaMarche' div does not seem to follow the flex order, it is located at the top of the 'details-index' column. Do you know how to solve this problem?
#credits {
font-family: 'Roboto Condensed', sans-serif;
color: #FFFFFF;
height: 100vh;
background-color: #FB3D00;
margin-bottom: 0;
}
#columns {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
#details-index {
font-size: 1.6vmin;
text-align: center;
flex: 1;
order: 1;
display: flex; /*Note : Each of my columns is also a flex container for other contents I omitted*/
flex-direction: column;
justify-content: space-around;
}
(...)
#commentCaMarche {
font-size: 2vmin;
text-align: center;
flex: 1;
order: 2;
display: flex;
flex-direction: column;
justify-content: space-around;
}
(...)
#sources {
font-size: 1.4vmin;
text-align: center;
flex: 1;
order: 3;
display: flex;
flex-direction: column;
justify-content: space-around;
}
<div id='credits'>
<div id='columns'>
<div id='commentCaMarche'>
<h2>Comment ça marche</h2> (...)
</div>
<div id='details-index'>
<h2>Le détail</h2> (...)
</div>
<div id='sources'>
<h2>Sources des données</h2> (...)
</div>
</div>
</div>

Answer 1

Here is the css for making it responsive 3 column
#columns{width:100%; float:left;}
#commentCaMarche{width:33.33%; float:left}
#details-index{width:33.33%; float:left}
#sources{width:33.33%; float:left}

Answer 2

You need to change order property for your flex columns. JSfiddle
#details-index {
font-size: 1.6vmin;
text-align: center;
flex: 1;
order: 2;
display: flex; /*Note : Each of my columns is also a flex container for other contents I omitted*/
flex-direction: column;
justify-content: space-around;
}
#commentCaMarche {
font-size: 2vmin;
text-align: center;
flex: 1;
order: 1;
display: flex;
flex-direction: column;
justify-content: space-around;
}

Answer 3

The flex-wrap: wrap will make your columns break line when they doesn't fit the width available, so by removing it from the columns rule, you'll have 3 proper columns at any width.
I also temporarily removed the order from the flex items, so they show up in the same order they are placed in the markup, but if you need to change them like in your sample, please add it back, or why not simply swap them in the markup
#credits {
font-family: 'Roboto Condensed', sans-serif;
color: #FFFFFF;
height: 100vh;
background-color: #FB3D00;
margin-bottom: 0;
}
#columns {
display: flex;
justify-content: space-between;
}
#details-index {
font-size: 1.6vmin;
text-align: center;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-around;
}
#commentCaMarche {
font-size: 2vmin;
text-align: center;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-around;
}
#sources {
font-size: 1.4vmin;
text-align: center;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-around;
}
<div id='credits'>
<div id='columns'>
<div id='commentCaMarche'>
<h2>Comment ça marche</h2>
(...)
</div>
<div id='details-index'>
<h2>Le détail</h2>
(...)
</div>
<div id='sources'>
<h2>Sources des données</h2>
(...)
</div>
</div>
</div>