Ordering divs from one column to three separate columns in a unique sequence with the help of Bootstrap

When resizing the screen, the goal is to rearrange divs within 2 or 3 columns with a different order (view image HERE). The layout should have no large empty spaces between divs other than margins.

<div class="container-fluid">
 <div class="row">
  <div class="col-md-5 order-md-2 offset-md-7">**A**</div>
  <div class="col-md-7 order-md-1">**B**</div>
  <div class="order-md-5">**C**</div>
  <div class="col-md-5 order-md-4 offset-md-7">**D**</div>
  <div class="col-md-5 order-md-3 offset-md-5">**E**</div>
  <div class="order-md-6">**F**</div>
 </div>
</div>

Although I can arrange the items correctly, there appears to be a space in height between A and E that I'm unable to eliminate. Is this the correct approach, or is there another solution?

If you could guide me on how to achieve the same for the third column, I believe I can tackle it myself.

For reference, check out this example image showing divs in one column needing a different order spread across three columns: IMAGE

cssbootstrap-4

Answer №1

To swap the content of columns B and C, you'll need to use jquery.

Add the order class for the D and E columns.

Don't forget to reload the page when resizing to a mobile screen in order to see the changes on mobile devices, as jquery is used to live detect the mobile screen.

Here's the link to the jsfiddle.

If you view the live jsfiddle demo and resize your screen to mobile, press shift+enter to switch the positions of the columns.

$(document).ready(function() {
  // Get the inner HTML (Column B and Column C)
  var x = document.getElementById("movefrom1").innerHTML
  var y = document.getElementById("movefrom2").innerHTML


  if (window.innerWidth <= 768) { // Check browser width
    // Move elements to desired location (as per moveto id)
    document.getElementById("b").innerHTML = x;
    document.getElementById("c").innerHTML = y;
    // Replace element with empty string
    document.getElementById("movefrom1").innerHTML = ""
    document.getElementById("movefrom2").innerHTML = ""
  }
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>


<div class="container-fluid text-center text-white">
  <div class="row bg-primary">
    <div class="col-lg-4 col-md-6 p-md-5" id="movefrom1">
      Column-B
    </div>
    <div class="col-lg-4 col-md-6 order-0">
      <div class="row ">
        <div class="col-12 p-5">Column A</div>
        <div class="col-12 p-md-0 p-5" id="b"></div>
        <div class="col-12 p-md-0 p-5" id="c"></div>
        <div class="col-12 p-5 order-md-4 order-5">Column E</div>
        <div class="col-12 p-5 order-md-5 order-4">Column D</div>
      </div>
    </div>
    <div class="col-lg-4">
      <div class="row">
        <div class="col-12 bg-dark p-md-5" id="movefrom2">Column C</div>
        <div class="col-12 bg-secondary p-5">Column F</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

Align the h1 vertically within a div without any extra space around it

I am trying to vertically center my content div within my header div without any extra space around it. I had it working before but the width of the content div would always be 100%. Here is the code I used: #header { position: absolute; width: 100% ...

htmlcss

Tips on aligning text vertically within a Bootstrap table

My goal is to vertically align the text in the center of its row within a bootstrap table, regardless of its length. I've been trying to achieve this using vertical-align: middle; line-height: 90px;. Adjusting the line-height seems to work for center ...

htmlcsstwitter-bootstrap

Unusual HTML glitch interrupting CSS and JS file inclusion

Check out the issue I'm facing by clicking on this link: I've meticulously coded everything, but for some reason my CSS file and jQuery file are not being included. This is really confusing me because I've been programming for a while now. ...

htmlcssincludefirebug

Having trouble loading image on web application

Currently, I am facing an issue while attempting to add a background image to an element within my Angular web application. Strangely enough, the relative path leading to the image seems to be causing my entire app to break. https://i.stack.imgur.com/b9qJ ...

htmlcssangularweb-applicationsrelative-path

Div that automatically expands

Currently facing a bit of an issue. I’m attempting to expand and retract the height of #inner upon clicking, with the intention for the height of #container to increase automatically without manually setting it to ‘auto’. Unfortunately, it seems that ...

jqueryhtmlcss

Problem with bootstrap row height being set to 100%

I am currently immersed in a project utilizing the Twitter Bootstrap 3 framework. Here is the basic structure of my HTML layout: Sidebar Main content The sidebar element has a height set to 100% and a float: left property so that the div with the class ...

htmlcsstwitter-bootstrap

React Sticky sidebar implementation throughout the various components

My goal is to implement a sticky sidebar that moves smoothly across specific components on my webpage. The challenge I am facing is that the CSS 'sticky' property only allows movement within the component it was created in. So, my question is - w ...

cssreactjs

Angular material: issue with alignment of table inside mat-expansion compared to other table

Hey there, I've encountered an issue on an Angular website where the columns in a table are not aligning properly. Does anyone have a solution for this problem? Thanks! <div class="table-responsive "> <table class="table" style=" ...

cssangularbootstrap-4angular-materialangular7

Issue with loading HTML file correctly in Django

I have been attempting to integrate my Django app with an admin dashboard from a repository on GitHub. After successfully logging in, the app redirects to the dashboard, but only the HTML part loads and none of the fancy features are visible on the dashboa ...

javascriptpythonhtmlcssdjango

Attempting to adjust table size in MPDF to fill the available height

I'm currently utilizing MPDF in order to create a PDF document from an HTML page that includes a table. My goal is to have the table expand to fill up the remaining space on the page. Here is the specific table I am working with: I want the final el ...

phphtmlcsspdfmpdf

Difficulty with collapsing and expanding levels in Bootstrap 4 sidebar navigation

Having some trouble with my vertical Nav created using bootstrap 4. I have 2 levels of lists, but when I click on one dropdown, the other dropdown doesn't close. Here is a link to the issue: https://jsfiddle.net/thilanka/cr0Lfmd1 <ul class="na ...

javascriptjquerycsstwitter-bootstrapbootstrap-4

Unable to adjust font for headings using CSS and Bootstrap

Looking to expand my skills in HTML and CSS, I've encountered a bit of a hiccup. Utilizing Bootstrap for my webpage, here's the simplified version of what I have so far: index.html: <!DOCTYPE html> <html> <head> <lin ...

htmlcsstwitter-bootstrap

Troubleshooting: Why isn't External CSS Functioning Properly in Broadleaf

I have encountered a question regarding the use of a custom email template in broadleaf. It seems that I am unable to apply an external CSS file and can only use inline styles. Is this normal behavior, or am I missing something? Below is how I am attempti ...

cssspringbroadleaf-commerce

Leveraging jQuery to dynamically load an icon based on the content within a <label> tag

I manage a website that dynamically fetches content from a database, with varying contents for each label. For example, one label may be generated as General:, while another may be generated as TV:. My question is, can jQuery be used to replace the text NA ...

javascriptjqueryhtmlcss

Combining fixed pixel width with the max-width property in CSS

My container has a nested <p/> tag serving as the message text. The container is set to have a width of 200px, with a max-width of 600px to allow for expansion if the message length exceeds the initial 200px. However, despite these settings, the div ...

htmlcss

AngularJS Application experiencing extremely slow performance with IE's "Style Calculation" feature

In my AngularJS app, I am using Angular Material and loading data from an external API. Everything runs smoothly in Chrome, Firefox, and Safari, but when it comes to Internet Explorer, the performance is abysmal. The app becomes slow, CSS animations are c ...

cssangularjsperformanceinternet-explorer

Ensure that FlexBox Columns have a height of 100% and vertically align their content

Having scoured through numerous questions and answers, I'm still stuck on why I can't achieve 100% height for certain flexbox columns. Specifically, trying to make the "Genre" column with one line of text match the height of the "Song & The A ...

cssflexbox

My vanilla JavaScript code isn't running the smooth scroll function as expected

Struggling to incorporate smooth scroll on Safari using Vanilla js. Despite following the documentation to a tee, the implementation is still not functioning as expected. Outlined below is the vanilla.js code: (function() { scrollTo(); })(); function ...

javascripthtmlcss

It is not possible for jQuery to modify the style of ul and li elements

$(document).ready(function(){ $(".menu").on('click', 'li', function () { $(this).css('background-color', '#000000'); }); }); </script> <ul class="menu"> <li onclick="window.location.href=&apos ...

jquerycsshtml-listsclick

The most recent version of Bootstrap is experiencing issues with responsiveness in the navbar

I have set up Bootstrap as follows: "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.5", "bootstrap": "^4.0.0-beta" Now, I wanted to add a navbar, so I created the following code: <nav class="navbar navbar-toggleable-md navbar-light bg-faded" *ngIf="! ...

twitter-bootstrapangularbootstrap-4ng-bootstrap