Floating with Flex in Bootstrap 4: A seamless way to achieve

Is there a way to achieve this floating layout using Bootstrap 4 flex Grid? I've attempted to use the flex order function but encountered some issues. Have a look at my result:

<div class="row align-items-start">

        <div class="col-sm-8 float-left" style="background: orange;order:1">
                <div class="white-container pt-5 pb-5">
                    # LEFT 1
                </div>
            </div>
            <div class="col-sm-4 float-right" style="background: pink;order:2">
                <div class="white-container pt-3 pb-3">
                    # RIGHT 1
                </div>
            </div>
            <div class="col-sm-4 float-right" style="background: grey;order:4">
                <div class="white-container pt-3 pb-3 ">
                    # RIGHT 2
                </div>
            </div>
            <div class="col-sm-8 float-left" style="background: yellow;order:3">
                <div class="white-container pt-5 pb-5">
                    # LEFT 2
                </div>
            </div>
            <div class="col-sm-8 float-left" style="background: yellow;order:5">
                <div class="white-container pt-5 pb-5">
                    LEFT 3
                </div>
            </div>
            <div class="col-sm-4 float-right" style="background: grey;order:6">
                <div class="white-container pt-3 pb-3">
                    RIGHT 3
                </div>
            </div>
        </div>

The issue with my current solution lies in the spaces between the right columns. Any advice or suggestions before I resort to using JavaScript would be greatly appreciated :)

cssflexboxbootstrap-4bootstrap-grid

Answer №1

JavaScript Solution:

let isMobileSorted = false;

window.addEventListener('resize', function() {
    if (window.innerWidth < 768) {
        if(!isMobileSorted) {
            // sort mobile
            document.querySelector("#widget").insertAdjacentElement('afterend', document.querySelector("#pictures"));
            document.querySelector("#video").insertAdjacentElement('afterend', document.querySelector("#widget"));
            document.querySelector("#reviews").insertAdjacentElement('afterend', document.querySelector("#contact"));
            isMobileSorted = true;
        }
    } else {
        if(isMobileSorted) {
            // resort desktop
            document.querySelector("aside").insertAdjacentElement('afterbegin', document.querySelector("#widget"));
            document.querySelector("#video").insertAdjacentElement('afterend', document.querySelector("#widget"));
            document.querySelector("#reviews").insertAdjacentElement('afterend', document.querySelector("#video"));
            isMobileSorted = false;
        }
    }
});

window.dispatchEvent(new Event('resize'));

Answer №2

To make this design easier to create, consider using a two-column layout side by side.

To see a live example, visit here.

<div class="container">
  <div class="row">
    <div class="col-sm-8">
      <div class="p-5" style="background: orange;">
        # LEFT 1
      </div>
      <div class="p-5" style="background: yellow;">
        # LEFT 2
      </div>
      <div class="p-5" style="background: lightgreen;">
        # LEFT 3
      </div>
    </div>

    <div class="col-sm-4">
      <div class="p-3" style="background: pink;">
        # RIGHT 1
      </div>
      <div class="p-3" style="background: grey;">
        # RIGHT 2
      </div>
      <div class="p-3" style="background: lightblue;">
        # RIGHT 3
      </div>
    </div>
  </div>
</div>

If maintaining the item order is crucial, Flexbox may not be the right choice. Consider using a grid layout library like Masonry with JavaScript.

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

The Bootstrap 4 Carousel experiences flickering issues during transitions when viewed on Safari browser

After integrating a Bootstrap 4 carousel onto a Drupal platform, I encountered a peculiar issue. The carousel functions smoothly on Chrome, but on Safari, it briefly blinks before transitioning to the next slide (as per the set interval time). Initially, I ...

javascripthtmlcssbootstrap-4

Is there a technique I could use to create a visual effect like zooming, but without altering the dimensions of the image?

I'm currently working on a project to develop a photo gallery. let img = document.createElement('img') img.src = "https://upload.wikimedia.org/wikipedia/commons/thumb/0/07/Wikipedia_logo_%28svg%29.svg/1250px-Wikipedia_logo_%28svg% ...

javascripthtmlcss

Float over a specific line in a drawing

I am looking to develop a unique rating system using css, html, and potentially js : https://i.sstatic.net/pQP79.png My goal is for the user to hover over a specific section of a circular stroke and have it fill with a particular color, all while maintai ...

javascripthtmlcss

determining CSS selector

Having trouble identifying a locator using CSS. There are 10 elements with the same locator name on the webpage. Each web element has the same XPath value: //div[@class='thumb_image'] The web element list size is 10. If I want to access the 5t ...

cssselenium

Adjusting input height with CSS in Google Chrome

When I define an input element with the following CSS properties: input { border: none; font-family: arial, sans-serif; font-size: 16px; line-height: 16px; padding: 0; } I anticipate the height of the input to be 16px, however, upon inspecting ...

htmlcssgoogle-chrome

Is the JavaScript progress bar dysfunctional when used with object-oriented JavaScript code, but functions properly with arrow functions?

After posting a question about the JavaScript progress bar not working with object-oriented JavaScript code on Stack Overflow, I decided to try rewriting the script using arrow functions. Here is the new code: document.getElementById("barButton").addEve ...

javascripthtmlcssoop

Align images of varying sizes vertically within div containers, even when the image is larger than the div itself

I'm facing a challenge when it comes to aligning images vertically inside divs. The problem arises due to the following conditions: The images will have varying and unknown sizes. These images are larger than the divs they are contained in, requiri ...

javascriptjquerycssvertical-alignment

Unlinked from the main content, the Angular2 Material2 sidenav stands on its

I am in the process of implementing the material2 sidenav component. My goal is to have a standalone, full-height sidebar that smoothly slides in and out without any interference with the rest of the app layout caused by the sidenav-layout. The desired ou ...

cssangularlayoutangular2-material

My toggleclass function seems to be malfunctioning

I am encountering a strange issue with my jQuery script. It seems to work initially when I toggle between classes, but then requires an extra click every time I want to repeat the process. The classes switch as expected at first, but subsequent toggles req ...

javascriptjqueryhtmlcss

A step-by-step guide on coding a slider image

<?php $query1="SELECT * FROM user_photos_offline WHERE ssmid='$ssmid' AND status='1' ORDER BY date_uploaded DESC LIMIT 0,5"; $sql=mysql_query($query1); $count=mysql_num_rows($sql); ...

jquerycss

Adjust the width of a textarea to expand evenly within its container when exceeding the specified width limit using CSS

I am currently attempting to adjust the size of this textarea proportionally. However, when I try to increase it beyond 100% width, it only expands to the right side. I have already experimented with using margin: auto and display: block but unfortunately, ...

htmlcsspug

Tips for rotating and positioning an element in the top left or top right corner of a page

I recently tried rotating a div with text and wanted to position it at the top left corner. I was able to successfully align it at the top, but I'm having trouble getting it to align with the left edge. Any tips on how to achieve this? .credit { ...

htmlcsscss-transforms

Can anyone suggest a stellar sprite generator for me?

I am in search of a sprite generator to streamline my web development process. With so many options available, I am seeking recommendations for the best tool. Ideally, I want a generator that can produce both a sprite image and corresponding CSS files wi ...

htmlcssspritecss-sprites

Creating an HTML table by populating it with data from a JavaScript array

Imagine you have a JavaScript array structured like this: [ "Heading 1", "Heading 2", "Data 1", "Data 2", "Data 3", "Data 4", ] Your task is to generate an HTML table from this array that looks like the one in this link: https://i.stack.imgur.com/7laUR. ...

javascripthtmlcss

Incorporating JavaScript into a pre-existing HTML and CSS user interface

After successfully coding a chat app UI for my project site using CSS and HTML, I am now facing the challenge of adding functionality to my existing code. The issue is setting up the client server and integrating chatting functions into my current UI. Mo ...

javascripthtmlcssreactjsmern

The location of the footer is not aligned correctly

Recently, I encountered an issue that has left me puzzled. The problem is that the footer on my webpage is appearing between the calendar button and the calendar itself. Here is a snippet from my calendar.html file: {% extends 'base.html' %} {% ...

htmlcssdjango

BOOTSTRAP Issue: The sticky footer in the template is not staying sticky

I am at the point where I am tempted to open my window and throw my computer out. I followed a tutorial on Bootstrap for the footer template. Everything looks good, but when my text extends beyond one page, the footer remains stuck in place and does not m ...

htmlcsstwitter-bootstrapbootstrap-5

HTML is unable to recognize the CSS file. Maven and Spring are the solutions

I'm having some trouble connecting my CSS to my HTML. This is the structure of my folders: https://i.sstatic.net/B9bHx.png Here is my HTML code: https://i.sstatic.net/XyE4E.png I've tried several methods to make it work. Interestingly, every ...

htmlcssspringmaven

What is the method for allowing tooltips to disappear when clicked on?

Is there a way to prevent a tooltip from hiding unless it is clicked on? Would using a popover be a better solution? var Button = document.querySelector('.Button'); $(Button).attr("data-toggle", "tooltip"); $(Button).attr("data-placement", "top ...

javascriptjquerybootstrap-4

The tooltip is obscured by the table row

I'm having trouble with a simple CSS fix and can't seem to figure out why. The z-index and overflow visibility properties are not working as expected. I just need 'In Progress' to be displayed above everything else. Some things I' ...

htmlcssangulartooltip