Creating a responsive layout with organized rows and columns using Bootstrap

I'm currently facing some challenges with the arrangement of columns and rows in a bootstrap layout. I'm unsure if it's feasible to achieve what I have in mind using Bootstrap's grid system.

Here is the layout I have for larger devices:

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

My goal is to rearrange the columns for smaller devices as shown below:

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

The issue I am encountering is related to "column 2," which I can't split into two parts. Is there an alternative method to create a layout similar to this one using Bootstrap?

Thanks a lot in advance!

Edit

For larger devices, the layout would resemble the following structure:

<div class="container-fluid">
  <div class="row">
    <div class="col-12 col-lg-8">
      <div>
        Consider a large data table here
      </div>
    </div>
    <div class="col-12 col-lg-4">
      <div class="row">
        <div class="col-12">
          Columns inside row 2
        </div>
        <div class="col-12">
          Columns inside row 2
        </div>
        <div class="col-12">
          Columns inside row 2
        </div>
      </div>
      <div class="row">
        <div class="col-12">
          Columns inside row 3
        </div>
        <div class="col-12">
          Columns inside row 3
        </div>
        <div class="col-12">
          Columns inside row 3
        </div>
      </div>
    </div>
  </div>
</div>

View it on CodePen: https://codepen.io/lucas-labs/pen/yLLeVxO

csstwitter-bootstrapbootstrap-4

Answer №1

To adjust the order of columns, they need to have the same parent element. In Bootstrap 4, one way to accomplish this is by turning off flexbox on lg and utilizing floats.

<div class="container-fluid">
    <div class="row mainrow d-lg-block d-flex overflow-auto">
        <div class="col-12 col-lg-8 first-column float-left">
            <div class="big-data-table">
                Insert a large data table here
            </div>
        </div>
        <div class="col-12 col-lg-4 second-column float-right order-first">
            <div class="row myrow">
                <div class="col-12">
                    Columns inside row 2
                </div>
                <div class="col-12">
                    Columns inside row 2
                </div>
                <div class="col-12">
                    Columns inside row 2
                </div>
            </div>
        </div>
        <div class="col-12 col-lg-4 second-column float-right">
            <div class="row myrow">
                <div class="col-12">
                    Columns inside row 3
                </div>
                <div class="col-12">
                    Columns inside row 3
                </div>
                <div class="col-12">
                    Columns inside row 3
                </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

Adjusting the height of a jQuery Mobile collapsible post-expansion

My jQuery collapsible is not resizing properly to fit the expanded content. Below is an example of the collapsible structure: <div class="row collapsibles" data-role="collapsible"> <h1>Supercategory A</h1> <div class="col-xs-7 ...

jquerycssjquery-mobilejquery-mobile-collapsible

Bootstrap is designed to dynamically adjust to the size of the browser window, ensuring a smooth

After completing the construction of a new website, I encountered an issue where the styles and layouts are responsive when adjusting the browser window size. However, upon opening responsive inspect tool, no changes occur - columns refuse to break and t ...

htmlcsstwitter-bootstrapresponsive-design

Show all <p> lines in a .txt file in a horizontal format instead of vertical using javascript and jquery

I'm attempting to export the content from a div as a .txt file, but all the paragraphs are displaying side by side. For instance, within the div content, I have the following lines: <div id="content> <p>hello</p> <p>H ...

javascriptjqueryhtmlcss

What might be causing the checkboxes to not be included in the request?

I am currently working on a form that includes checkboxes, but for some reason, I am unable to get the form data to send to the view. The request only seems to include the csrf token. Can anyone point out what I might be doing wrong here? <form action=& ...

bootstrap-4request

Disabling the scrollTop() effect following a click event with onClick()

Utilizing the scrollTop() event to toggle the visibility of a div at a specific position and also using the onClick() event to permanently hide the div. While the events are functioning properly, an issue arises when scrolling the page causing the div to r ...

javascriptjqueryhtmlcss

Is there a way to activate the jquery event handler only when certain events occur in a particular sequence?

Currently, I am facing a particular scenario involving the use of Bootstrap tabs in combination with MarionetteJS. I want to ensure that when a tab is clicked, my designated handler function is only called after the 'show.bs.tab' event for that s ...

javascriptjquerytwitter-bootstrap

Is there a way to remove text from a div when the div width is reduced to 0?

Upon loading the page, my menu is initially set to a width of 0px. When an icon is clicked, a jQuery script smoothly animates the menu's width to fill the entire viewport, displaying all menu items (links) perfectly. The issue I'm facing is that ...

javascriptjqueryhtmlcss

Can CSS be utilized to consistently display text in a uniform manner?

Currently developing a unique Qur'an app for Muslims, standing out from the already existing ones in the market. There are two common types of Qur'an apps available: one that replicates the exact look of a physical copy, page by page, using imag ...

htmlcss

Experiencing odd behavior with my Dash App when using CSS grid on it

Seeking assistance with my coding issue, I believe sharing my code from Github would be the most efficient way to address it. An exclusive branch named css_problem_branch has been created to showcase the problem at hand. To access the Github repository, p ...

pythoncssdashboardplotly-dash

How to Align Navigation Searchbar in Center When Bootstrap is Collapsed

I am attempting to center my search bar when it is collapsed. Currently, it appears like this: As you can see, the links are centered, but not the search bar. This is the existing HTML structure: <!-- Navigation Bar Start --> <div class ...

htmlcsstwitter-bootstrapnavigation

Tips for creating multiple popups using a single line of JavaScript code

I am new to JavaScript and I am attempting to create a popup. However, I am facing an issue in opening two divs with a single line of JavaScript code. Only one div opens while the other remains closed despite trying various solutions found on this website. ...

javascripthtmlcsspopup

Looking to conceal content on the navbar background using Bootstrap

From the image above, it is apparent that the text is appearing behind the navigation bar. I'm seeking guidance on how to conceal this text from the navbar when scrolling up the content. Should I create a custom CSS class with properties, or is there ...

htmlcssbootstrap-4navbarcustomization

Alter the Header/Navigation to switch colors depending on the section of the website currently being viewed

I'm currently revamping my personal portfolio website and had an idea for a cool feature. I want the header/navigation bar to change color based on which section of the webpage it's in (the site is one page only). My initial thought was to add o ...

javascriptjqueryhtmlcss

Styling the navigation bar using CSS and positioning a <div> element underneath

Struggling to design a navbar using Bootstrap and have a div positioned underneath it that fills the remainder of the page? You're not alone! As someone new to Bootstrap and CSS, this can be tricky. Here's an example of how I created a navbar: ...

htmlcss

accepting decimal values for x-editable input field

Recently, I started using x-editable along with bootstrap and came across a roadblock. Here is the HTML field definition: <div class="form-group"> <label class="col-sm-4">Service Charges(%)</label> <div class="col-sm-6 hoverE ...

jquerytwitter-bootstrapx-editable

How to center a div vertically in a window

I have a CSS layout that positions a div both horizontally and vertically relative to the window. It works well, but when I scroll down the page, the div stays centered as if the page hadn't moved. width:600px; height:300px; position:absolute; left:5 ...

javascriptcss

Creating a Background Image Using CSS3: A Step-by-Step Guide

Hey there! I'm trying to figure out how to recreate the image attached using CSS3. I've tried a few online tools for generating gradients, but no luck so far. :( I have the original image, but I really want to create the background using CSS3 in ...

cssbackground

ng-view displays unexpected behavior when used with bootstrap data tables

For the first time, I decided to utilize a pre-made template for my project. You can find the theme by following this link here. I've been facing an issue where the datatable from the theme doesn't load properly into the ng-view. Everyt ...

angularjsdatatablesbootstrap-4ng-view

The bootstrap link transforms into a standard button

My hyperlink stops working when I include Bootstrap code, transforming into a standard button. Here's the code in question: <!DOCTYPE html> <html lang="" dir="ltr"> <head> <link rel="stylesheet" ...

phphtmlcssbootstrap-4

Looking for assistance with aligning the content of an input label using Bootstrap?

Is there a way to adjust the label content if it is larger than the input box size? My goal is to keep all input boxes on the same line while allowing labels to wrap accordingly. https://i.sstatic.net/NrLck.png I'm trying to achieve the alignment sh ...

javascripthtmlcssbootstrap-5