调整屏幕大小时将一行更改为两个不同的行答案

【问题标题】：Change a row into two different rows when resizing the screen调整屏幕大小时将一行更改为两个不同的行
【发布时间】：2020-11-29 14:57:31
【问题描述】：

我有一行有两个输入列：

    <div class="row first-row">
      <div class="column col-6">
        <div class="form-group">
          <label for="usr"
            >Sequence Number:</label
          >
          <input type="text" class="form-control sequence-number" id="usr" />
        </div>
      </div>
      <div class="column status col-6">
        <BaseDropdown
          label="Status:"
          :options="statusTypes"
          v-model="building"
          placeholder="Please select a status"
        />
      </div>
    </div>

我想在将屏幕大小调整为移动设备时将此行分成两行，而不是在移动设备上呈现时。它应该看起来像这样：

我怎样才能做到这一点？

【问题讨论】：

标签： javascript html css mobile responsive-design

【解决方案1】：

最简单的方法是使用 Flex。您可以通过重新组织 html 以在列 div 中包含两个字段来实现这一点，如下所示：

<div class="row first-row">
    <div class="column col-6">
        <div class="form-group">
            <label for="usr">Sequence Number:</label>
            <input type="text" class="form-control sequence-number" id="usr" />
        </div>
        <div class="column status col-6">
            <BaseDropdown label="Status:" :options="statusTypes" v-model="building"
                placeholder="Please select a status" />
        </div>
    </div>
</div>

然后将 flex 应用于列 div，媒体查询在您选择的断点处更改 flex-direction：

.column.col-6 {
    display: flex;
    flex-direction: column;
}

@media screen and (min-width: 768px) {
    .column.col-6 {
        display: flex;
        flex-direction: row;
    }
}

【讨论】：