How to get columns to break into rows with flexbox?

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 g

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