In my coding, there is a particular div element:
<div id="UnitInfoDiv" class="form-group row hidden">
<div id=@UnitPartialViewHtmlId class="row"></div>
<div class="row">
<div class="col-md-6">
Is the information about the current owner correct?
@Html.RadioButtonFor(x => x.IsCorrectOwner, "true")Yes
@Html.RadioButtonFor(x => x.IsCorrectOwner, "false")No
</div>
</div>
</div>
This div contains a partial view with the following content:
@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>
When viewed on desktop, the Current Owner section occupies the left half of the screen, the Warranty Information is on the right half, and the radio buttons are below the Current Owner. This layout is satisfactory.
However, on mobile devices, the display shows the Current Owner at the top, the Warranty Information in the middle, and the radio buttons at the bottom.
I am seeking a solution to rearrange this layout for mobile devices, specifically wanting the Warranty Information at the top, followed by the Current Owner in the middle, and the radio buttons at the bottom.
I have referred to this Stack Overflow question about moving elements within a mobile layout, but the provided solutions did not align with what I require as they were focused on reordering items within the same column.