Escaping Bootstrap Columns - html

Question

I have two Bootstrap columns in my row, one is wide and tall and the others are short and narrow
However, on mobile devices (which I am targeting as anything below lg) I want to change the order of these columns, effectively splitting into three
Photo Consent
Organisation Details
Images
However, as the Photo Consent and Images are in the same column, I can't get this layout right - I either end up with both Photo Consent and Images above the Organisation, or I can get the right mobile layout but then Images ends up on a new row below on desktop.
Is there a way to achieve the desired layout in Bootstrap?
Here's the relevant markup for these columns:
<div class="row">
<!-- first column - Organisation Details -->
<div class="col-12 col-lg-7">
<div class="card card-body mb-3">
<h3 class="text-center">Organisation Details</h3>
<div class="row">
<div class="col-12 col-lg-6">
<div class="form-group mb-3">
<label class="form-label" for="name">Name</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Name" maxlength="255" required />
</div>
</div>
<div class="col-12 col-lg-6">
<div class="form-group mb-3">
<label class="form-label" for="slug">URL Slug</label>
<input type="text" class="form-control" id="slug" name="slug" placeholder="URL Slug" maxlength="300" />
</div>
</div>
<div class="col-12 col-lg-6">
<colour-picker title="Primary Colour" name="primary" value="#000000">
</colour-picker>
</div>
<div class="col-12 col-lg-6">
<colour-picker title="Secondary Colour" name="secondary" value="#FFFFFF"></colour-picker>
</div>
</div>
<div class="form-group mb-3">
<label class="form-label" for="description">Description</label>
<textarea rows="7" id="description" class="form-control" name="description" placeholder="Description" ></textarea>
</div>
</div>
</div>
<!-- second column - photo consent and images -->
<!-- on mobile, would prefer to split this column in two and have Photo Consent show above Org Details -->
<div class="col-12 col-lg-5">
<div class="card card-body mb-3">
<h3 class="text-center">Photo Consent</h3>
<div class="form-group mb-3">
<label for="consent">Can we take photos and videos of this organisation?</label>
<select class="form-control style-by-value" name="consent" id="consent" required>
<option value="">-- Please Select --</option>
<option value="1">No</option>
<option value="2">Yes, but...</option>
<option value="3">Yes</option>
</select>
</div>
<small>Consent type updated from web order</small>
</div>
<div class="card card-body mb-3">
<h3 class="text-center">Images</h3>
<div class="alert alert-danger text-center">File uploads are currently unavailable</div>
</div>
</div>
</div>
The only other thing I could think was to duplicate the columns and use a combination of d-none / d-none-lg to show/hide the relevant layout depending on the screen - but this is all wrapped in a form and I have concerns it could get a bit messy (besides the messiness of duplicated columns!!)

Answer 1

Hi Luke Reafactored your code.
added comments near each section please go through.
adding clearfix d-flex flex-wrap on the row
we are making the child elements inside the row to float, so adding clearfix will solve the issue of float elements.
d-flex flex-wrap setting the display to flex, and flex-wrap makes child elements wrap to next line when there is no enough space.
adding float-start order-2 on organisation block
float-start makes the block to float:left, order-2 - because we made the parent row to display as flex using d-flex , order class controls the position of the block when it is displayed as flex
rest of the blocks are floated to right using float-end, and following the same order concept, we are ordering the blocks.
i suggest you refer order concept in flex-box which helps to solve these issues.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap.min.css" integrity="sha512-SbiR/eusphKoMVVXysTKG/7VseWii+Y3FdHrt0EpKgpToZeemhqHeZeLWLhJutz/2ut2Vw1uQEj2MbRF+TVBUA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="container-fluid">
<!-- added clearfix and display classes -->
<div class="row clearfix d-flex flex-wrap d-lg-block">
<!-- first column - Organisation Details -->
<!-- added order classes and float classes -->
<div class="col-12 col-lg-7 float-start order-2">
<div class="card card-body mb-3">
<h3 class="text-center">Organisation Details</h3>
<div class="row">
<div class="col-12 col-lg-6">
<div class="form-group mb-3">
<label class="form-label" for="name">Name</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Name" maxlength="255" required />
</div>
</div>
<div class="col-12 col-lg-6">
<div class="form-group mb-3">
<label class="form-label" for="slug">URL Slug</label>
<input type="text" class="form-control" id="slug" name="slug" placeholder="URL Slug" maxlength="300" />
</div>
</div>
<div class="col-12 col-lg-6">
<colour-picker title="Primary Colour" name="primary" value="#000000">
</colour-picker>
</div>
<div class="col-12 col-lg-6">
<colour-picker title="Secondary Colour" name="secondary" value="#FFFFFF"></colour-picker>
</div>
</div>
<div class="form-group mb-3">
<label class="form-label" for="description">Description</label>
<textarea rows="7" id="description" class="form-control" name="description" placeholder="Description"></textarea>
</div>
</div>
</div>
<!-- second column - photo consent -->
<!-- added order classes and float classes -->
<div class="col-12 col-lg-5 float-end order-1">
<div class="card card-body mb-3">
<h3 class="text-center">Photo Consent</h3>
<div class="form-group mb-3">
<label for="consent">Can we take photos and videos of this organisation?</label
>
<select
class="form-control style-by-value"
name="consent"
id="consent"
required
>
<option value="">-- Please Select --</option>
<option value="1">No</option>
<option value="2">Yes, but...</option>
<option value="3">Yes</option>
</select>
</div>
<small>Consent type updated from web order</small>
</div>
</div>
<!-- moved images out of the above div and made it seperate -->
<!-- images -->
<!-- added order classes and float classes -->
<div class="col-12 col-lg-5 float-end order-3">
<div class="card card-body mb-3">
<h3 class="text-center">Images</h3>
<div class="alert alert-danger text-center">
File uploads are currently unavailable
</div>
</div>
</div>
</div>
</div>