Breaking Free from Bootstrap Grids

I have a row with two Bootstrap columns - one wide and tall, the other short and narrow

https://i.sstatic.net/u7WAf.png

However, for mobile devices (targeted below lg), I want to change the column order to split into three sections

  1. Photo Consent
  2. Organisation Details
  3. Images

The issue is that Photo Consent and Images share the same column, making it difficult to achieve the desired layout. I end up with both above Organisation or Images on a separate row below on desktop

Is there a way in Bootstrap to accomplish this layout?

Here's the markup for the 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"><a href="consent">Photo Consent</a></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>

An alternative solution I considered was duplicating the columns and using d-none / d-none-lg to toggle visibility based on screen size, but this might become messy given the form structure concerns about duplicated columns.

htmlcssbootstrap-5

Answer №1

I've made some improvements to your code, Luke. Check out the comments I added near each section for better understanding.

  1. By adding clearfix d-flex flex-wrap to the row, we ensure that child elements within the row float correctly. clearfix resolves any floating issues, while setting the display to flex (d-flex) and allowing elements to wrap when space is limited (flex-wrap).

  2. The float-start order-2 classes have been applied to the organisation block. This moves the block to the left with float-left due to float-start, and order-2 controls its position in a flex context created by d-flex.

  3. The rest of the blocks are aligned to the right using float-end and follow the same ordering principle according to their respective positions.

I recommend looking into the order concept in flex-box to solve similar layout 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"><a href="consent">Photo Consent</a></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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieving Data from Database on the Current Page

Struggling with fetching data from a MySQL database using PHP search methods and displaying the results on the same page? Here's how you can achieve it. This HTML Script: <html> <head> <title>Digital Library</title> </head ...

phphtmlmysql

One Background Image Serving Multiple Divs

Can you use one image (PNG or SVG) as the background for multiple divs? Take a look at the images below to see how it could work. And if the screen width gets smaller and the divs stack up vertically, is there a way to change the background accordingly? D ...

javascripthtmlcsssvgpng

Incorrect Tooltip DisplayWhat could be causing the issue with

I am facing an issue when trying to add a tooltip to a glyphicon within a tile. It doesn't seem to work correctly when it should. However, placing the tooltip outside of the tile works fine. I'm quite perplexed and would greatly appreciate any as ...

javascriptjqueryhtmljquery-ui-tooltip

Utilizing the active tab feature within CSS

I am currently working with a detailed structure of bootstrap theme classes. Currently, I am in the process of designing a menu. This is the code snippet for the navigation bar design in Bootstrap- <div class="navbar navbar-fixed-top navbar-invers ...

jqueryhtmlcssclick

javascript the unseen element becomes visible upon page loading

my website has the following HTML snippet: function getURLParameters() { var parameters = {}; var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) { parameters[key] = value; }); return param ...

javascripthtmlcss

JavaScript post method for JSON data: no input or output values

I am currently developing a page that extracts data from an HTML table consisting of two columns and an index of a form, and then converts it into a JSON string. The intention is to pass this data into PHP for further processing, perform calculations on th ...

javascriptphpjqueryhtmljson

Is it possible to create a dropdown like this using CSS?

Planning to create a new webpage. The main feature will be a dropdown menu that I envision like this: Check out the design here: http://img694.imageshack.us/img694/9350/dropdown.png Wondering if it can be achieved purely with CSS, or would I have to reso ...

cssuser-interfacedrop-down-menu

Creating a centered transparent rectangle of a specific width using HTML

I am working on a page layout similar to this FIDDLE body { margin:0 auto; max-width: 800px; padding:0 0 0 0; text-align:left; background-color:#FFFFFF; background-image: url('http://freeseamlesstextures.com/images/40-dirty-pa ...

htmlcss

Sending various values to a JavaScript function

I am working with a function that looks like this: //Function Call with Single Parameter responses(baseURL); //Function Definition function responses(baseURL) { $.ajax({ url: baseURL, type: "get", cache: false, header ...

javascripthtmlarraysajax

Rzslider not functioning properly due to CSS issues

I am facing an issue where rzslider is not appearing in my app. However, when I copy the code to an online editor, it works perfectly fine. Below is the code snippet: var app = angular.module('rzSliderDemo', ['rzModule', 'ui.boo ...

javascriptangularjshtmlcssangular-material

Incorporating a new text tag

Is there a way to add a text label for every circle that can be rotated and have its color changed? I'm looking for a solution that doesn't involve JSON data, but instead retrieves the necessary information from somewhere else. var w = 3 ...

javascripthtmld3.js

Is there a way to incorporate a callback function for animation in cgscenegraph?

After creating my animation, I am interested in incorporating a callback function when the loop of the animation comes to an end. Is there a way you can guide me on achieving this? Thank you. ...

javascripthtmlanimationcanvasframeworks

Can you point me in the right direction for declaring the ImageObject format in Angular?

To create an Image Slider similar to the one shown here, I need to load images from a source. However, I'm unsure about where exactly in the file (possibly in the component.ts?) I should declare them: imageObject: Array<object> = [{ ...

htmlcssangularslideshow

Is there a way to showcase a single HTML canvas across multiple div elements?

I'm currently developing a web application that includes a Google Maps feature in two different tabs using Twitter Bootstrap. I am exploring options to have one canvas element that can be displayed in both tabs with varying dimensions. One idea is to ...

javascriptjqueryhtmltwitter-bootstrap

The border class in Bootstrap 4 seems to be malfunctioning when it comes to the top

I'm struggling to add a border to a div using Bootstrap 4. When I try using only the border property, it looks strange, and when I use other properties, no border appears. Here is the code snippet: I even tried with the beta 2 version. If there is s ...

htmlcssbootstrap-4

Can CSS Grid be substituted for Material UI's grid component?

Exploring the Material-UI Grid Component, I have found that it is built on flexbox and offers great functionality. However, my curiosity lies in comparing it to CSS Grid, which I find equally user-friendly. Despite my preference for CSS Grid, I am hesita ...

cssreactjsmaterial-uinext.jscss-grid

How can one locate a particular element/style/class in the dev tools DOM while debugging in MUI v5?

Exploring the DOM and pinpointing the specific component file and style block in MUI v4 is a straightforward process: Locating a particular element/style class in MUI v4 However, in MUI v5, this functionality is no longer available, making it challenging ...

cssreactjsmaterial-uistyling

Looking for assistance in presenting the value of a range slider on your webpage?

Greetings! I am facing an issue while trying to showcase the output of a slider through JavaScript. When I run the code, I encounter an error saying 'Cannot read property of null'. Below is the HTML code snippet: <div class='sliderContai ...

javascripthtml

Interactive canvas artwork featuring particles

Just came across this interesting demo at . Any ideas on how to draw PNG images on a canvas along with other objects? I know it's not a pressing issue, but I'm curious to learn more. ...

javascriptjquerycsshtml

Ensure a div stays on a single line when viewed in Internet Explorer

My current setup is structured in the following way. <div id="header"> <div id="heading">Title</div> <div id="flow"> Enter Something: <input type="textbox" size="30" id="id" class="class" onkeyup="dosomething()" /> &l ...

jqueryhtmlcss