How to make div on the left when big and the bottom when small?

Question

I've got a 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>

with the partial view:

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

On desktop, CurrentOwner takes up the left half of the screen, Warranty takes up the right half, and the radiobuttons go below the left side. This is correct.

On mobile, though, the CurrentOwner is on top, the Warranty in the middle, and the radiobuttons on the bottom.

I need it as On mobile, though, the Warranty on top, the CurrentOwner in the middle, and the radiobuttons on the bottom.

How can I accomplish this?

I looked at How can I move a div from top to bottom on mobile layouts? but it doesn't seem to be what I need since it's putting the things to be re-ordered into the same column.

@isherwood I'm currently using 3.3.7 but could probably upgrade if needed, so which should I tag? — Sarov, Feb 27 '20 at 18:50
That's completely up to you. Version 3 has [column ordering](https://getbootstrap.com/docs/3.4/css/#grid-column-ordering). Bootstrap 4's flexbox [makes it easier](https://getbootstrap.com/docs/4.4/layout/grid/#order-classes), if that's worth it. — isherwood, Feb 27 '20 at 18:52
@isherwood I guess I'll go with 4, then, and try to upgrade. — Sarov, Feb 27 '20 at 19:20
@isherwood I'll have to finish upgrading first before trying. I'll update the Question if I run into anything. Thanks for the links. — Sarov, Feb 27 '20 at 20:13

score 1 · Accepted Answer · answered Feb 28 '20 at 20:50

Thanks to isherwood for pointing me to the right documentation. Once I upgraded to Bootstrap 4, the solution is dead simple. Using css class 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>

How to make div on the left when big and the bottom when small?

1 Answers1