CODEWITHSUNDEEP
csstwitter-bootstrapbootstrap-4
Sarov
Sarov

Reputation: 645

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

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.

Upvotes: 0

Views: 46

Answers (1)

Sarov
Sarov

Reputation: 645

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>

Upvotes: 1

Related Questions