如何使div大时在左侧，小时在底部？答案

【问题标题】：How to make div on the left when big and the bottom when small?如何使div大时在左侧，小时在底部？
【发布时间】：2020-06-11 20:20:52
【问题描述】：

我有一个 div：

<div id="UnitInfoDiv" class="form-group row hidden">
    <div id=@UnitPartialViewHtmlId class="row"></div>

    <div class="row">
        <div class="col-md-6">
            Is the Current Owner information correct?
            @Html.RadioButtonFor(x => x.IsCorrectOwner, "true")Yes
            @Html.RadioButtonFor(x => x.IsCorrectOwner, "false")No
        </div>
    </div>
</div>

局部视图：

@model ServiceCallUnitDTO
<div class="col-sm-6">
    <h3>Current Owner</h3>
    @Model.CurrentOwner
</div>
<div class="col-sm-6">
    <h3>Warranty Information</h3>
    @Model.Warranty
</div>

在桌面上，CurrentOwner 占据屏幕的左半部分，Warranty 占据右半部分，单选按钮位于左侧下方。这是正确的。

但在移动设备上，CurrentOwner 位于顶部，Warranty 位于中间，单选按钮位于底部。

不过，我需要它作为在移动设备上，顶部是保修，中间是 CurrentOwner，底部是单选按钮。

我怎样才能做到这一点？

我查看了How can I move a div from top to bottom on mobile layouts?，但它似乎不是我需要的，因为它将要重新排序的东西放在同一列中。

【问题讨论】：

@isherwood 我目前正在使用 3.3.7 但如果需要可能会升级，那么我应该标记哪个？
这完全取决于您。版本 3 具有 column ordering。 Bootstrap 4 的 flexbox makes it easier，如果值得的话。
@isherwood 我想我会选择 4，然后尝试升级。
@isherwood 在尝试之前我必须先完成升级。如果我遇到任何问题，我会更新问题。感谢您的链接。
@isherwood 我已经成功了。谢谢。

标签： css twitter-bootstrap bootstrap-4

【解决方案1】：

感谢 isherwood 为我指出正确的文档。一旦我升级到 Bootstrap 4，解决方案就非常简单了。使用css类order-sm-{#}：

<div id="UnitInfoDiv" class="form-group row hidden">
    <div class="container">
        <div id=@UnitPartialViewHtmlId class="row"></div>
    </div>

    <div class="row">
        <div class="col-md-6">
            Is the Current Owner information correct?
            @Html.RadioButtonFor(x => x.IsCorrectOwner, "true")Yes
            @Html.RadioButtonFor(x => x.IsCorrectOwner, "false")No
        </div>
    </div>
</div>

@model ServiceCallUnitDTO
<div class="col-sm-6 order-sm-1">
    <h3>Warranty Information</h3>
    @Model.Warranty
</div>
<div class="col-sm-6 order-sm-0">
    <h3>Current Owner</h3>
    @Model.CurrentOwner
</div>

【讨论】：