title: CSS Flexbox: How to go from single-column to two-column layout with alternating elements?
body: <p>I want to display a form with labels and form elements in two columns on wider screens, and in a single column with alternating label/input on smaller screens.</p>
  <p>So I need to go from</p>
  <pre><code>label
  input
  label
  input
  </code></pre>
  <p>on small screens to</p>
  <pre><code>label | label
  input | input
  </code></pre>
  <p>on larger ones. I'd like to use flexbox, because I need to support IE11 and I think despite its quirks there it would be easier to support than having to implement the new and old grid syntax.</p>
  <p>I can achieve this using <code>:nth-of-type()</code> (see below), and that's what I'll go for if there isn't any other solution, but I need to know the number of elements that will be present in the form and I'll have to extend the CSS whenever the number of form elements changes in the future.</p>
  <p>I could also wrap each label/form element pair in a container and have those side by side, but I'd like to also account for labels and inputs having different heights (see the row with labels 3 + 4), which wouldn't work (it would need something like subgrid to achieve this).</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
    display: flex;
    flex-wrap: wrap;
  }
  
  .container&gt;* {
    width: 50%;
    box-sizing: border-box;
  }
  
  .container label {
    margin-top: 0.3em;
    align-self: flex-end;
  }
  
  .container input {
    margin-top: 0.3em;
    align-self: flex-start;
  }
  
  @media screen and (min-width: 400px) {
    .container label:nth-of-type(1),
    .container label:nth-of-type(2) {
      order: 1;
    }
    .container input:nth-of-type(1),
    .container input:nth-of-type(2) {
      order: 2;
    }
    .container label:nth-of-type(3),
    .container label:nth-of-type(4) {
      order: 3;
    }
    .container input:nth-of-type(3),
    .container input:nth-of-type(4) {
      order: 4;
    }
    .container label:nth-of-type(5),
    .container label:nth-of-type(6) {
      order: 5;
    }
    .container input:nth-of-type(5),
    .container input:nth-of-type(6) {
      order: 6;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;label&gt;label1&lt;/label&gt;
    &lt;input placeholder="input1"&gt;
    &lt;label&gt;label2&lt;/label&gt;
    &lt;input placeholder="input2"&gt;
    &lt;label&gt;label3&lt;/label&gt;
    &lt;input placeholder="input3"&gt;
    &lt;label&gt;label4&lt;br&gt;lorem ipsum&lt;/label&gt;
    &lt;input placeholder="input4"&gt;
    &lt;label&gt;label5&lt;/label&gt;
    &lt;input placeholder="input5" style="height: 3em"&gt;
    &lt;label&gt;label6&lt;/label&gt;
    &lt;input placeholder="input6"&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Is there a more elegant/dynamic way to do this?</p>