Ordering flex items in different containers

Question

My desktop design has 2 textboxes in the left column and one textarea in the right column. The order of desktop is as follows:

• Field 1
• Field 2
• Field 3

On mobile however, the order should change to:

• Field 1
• Field 3
• Field 2

My HTML structure is as follows:

<form>

<div class="col-half">

    <div class="field-1">
        <label>Field 1</label>
        <input type="text">
    </div>

    <div class="field-2">
        <label>Field 2</label>
        <select>
        </select>
    </div>

</div>

<div class="col-half field-3">
    <label>Field 3</label>
    <textarea></textarea>
</div>

</form>

I've been able to do the desktop design however I'm struggling to re-order it correctly for mobile. My 2 questions are:

• Is it possible to use flex order to re-order elements which are inside separate containers?
• Is it possible to change my html structure to allow both the design & ordering of the desktop and mobile design?

Answer 1

If you use grid-template-areas and media queries you can do like this. Should be noted, this solution gets you all the way for browsers supporting grid (not counting ie11), if you do need to support ie check for a fallback solution.

.form-layout {
  display: grid;
  grid-template-areas: "field-1" "field-3" "field-2";
  gap: 1rem;
}

@media (min-width: 767px) {
  .form-layout {
    grid-template-areas: "field-1 field-3" "field-2 field-3";
  }
}

.field-1 {
  grid-area: field-1;
}

.field-2 {
  grid-area: field-2;
}

.field-3 {
  grid-area: field-3;
}

<form class="form-layout">
  <div class="field-1">
    <label>Field 1</label>
    <input type="text">
  </div>

  <div class="field-2">
    <label>Field 2</label>
    <select>
    </select>
  </div>

  <div class="field-3">
    <label>Field 3</label>
    <textarea></textarea>
  </div>
</form>