How to get columns to break into rows with flexbox? - html

Question

I have this form with four input elements in a row (in desktop view).
Can anybody tell me how to get those four input elements to break into rows when the screen width gets below, say, 680px?
form {
display: flex;
}
input {
width: 25%;
}
<form>
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
</form>

Answer 1

Use a media query with a breakpoint of 680px and flex-direction:column;
form {
display: flex;
}
#media screen and (max-width: 680px) {
form {
flex-direction: column;
}
}
<form>
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
</form>

Answer 2

By default, flex items line up in a row. An initial value on a flex container is flex-direction: row.
Switching to flex-direction: column is one good method for stacking items vertically. This method is already covered in another answer.
Another method would be to enable flex-wrap and give each input width: 100%.
This would allow only one input per row, forcing subsequent inputs to wrap.
form { display: flex;}
input { width: 25%; }
#media ( max-width: 680px ) {
form { flex-wrap: wrap; }
input { width: 100%; }
}
<form>
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
</form>
jsFiddle