在不同的容器中订购挠性商品

Question

我的桌面设计在左列有两个文本框，在右边列有一个文本框。桌面的顺序如下：

• 字段1
• 字段2
• 字段3

​

​

然而，在移动方面，命令应改为：

• 字段1
• Field 3
• Field 2

​

​

我的HTML结构如下：

<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>

我已经能够做桌面设计，但我正在努力重新订购它正确的移动。我的两个问题是：

是否可以使用flex重新排序独立containers?

• Is中的元素？
• 可以更改html结构以允许桌面和移动设计的设计和排序？

Answer 1

如果您使用grid-template-areas和媒体查询，您可以这样做。需要注意的是，如果您确实需要支持ie检查备用解决方案，则此解决方案将为支持网格的浏览器(不包括ie11)提供所有支持。

​

.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>

​