"Revamp Your Layout with Bootstrap 4's Customized Sorting Feature

I'm exploring methods to rearrange items on mobile using the md and col- classes to achieve the following layout:

On Desktop:

[1]    [4]
[2]    [5]
[3]
[6]
[7]

For Mobile:

[1]
[2]
[3]
[4]
[5]
[6]
[7]

Is there a way to accomplish this without resorting to the hidden-md- class or duplicating content?

Here is the HTML from ZimSystem:

<div class="row">
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-12 text-center">
                 1
            </div>
            <div class="col-md-12 text-center">
                2
            </div>
            <div class="col-md-12 text-center">
                3
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-12 text-center">
                long block of content for block 4
            </div>
            <div class="col-md-12 text-center">
                5
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-12 text-center">
                6
            </div>
            <div class="col-md-12 text-center">
                7
            </div>
        </div>
    </div>
</div>

Is it possible to arrange the content of Block 6 below Block 3 as illustrated in this picture: https://i.sstatic.net/Rcr4v.png

htmlcsstwitter-bootstrapbootstrap-4twitter-bootstrap-4

Answer №1

To create a nested structure, implement the following code:

<div class="row">
        <div class="col-md-6">
            <div class="row">
                <div class="col-md-12">
                    1
                </div>
                <div class="col-md-12">
                    2
                </div>
                <div class="col-md-12">
                    3
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="row">
                <div class="col-md-12">
                    4
                </div>
                <div class="col-md-12">
                    5
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="row">
                <div class="col-md-12">
                    6
                </div>
                <div class="col-md-12">
                    7
                </div>
            </div>
        </div>
    </div>

Check out this Flexbox grid demo

Edit - Due to the new "height" problem, using flexbox might not be ideal in this case. The recommended approach is to utilize the float utilities for the desired layout.

See this Float grid demo for reference

Answer №2

This solution is designed to work across all devices, including mobile. For a live demonstration, you can access the jsFiddle link here.

<div class="row">
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-12">
                1
            </div>
            <div class="col-md-12">
                2
            </div>
            <div class="col-md-12">
                3
            </div>
        </div>
    </div>
    <div class="col-md-6 offset-md-6">
        <div class="row">
            <div class="col-md-12">
                4
            </div>
            <div class="col-md-12">
                5
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-12">
                6
            </div>
            <div class="col-md-12">
                7
            </div>
        </div>
    </div>
</div>

If you encounter any other issues related to:

  • the migration process
  • adapting to new classes
  • and more

in the latest version of Bootstrap (v4.0.0-alpha.6), please refer to the official Bootstrap Site for assistance.

I trust this response addresses your queries and aids others facing similar challenges. :)

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

What is the best way to switch text color when the background changes?

Is there a way to dynamically change the color of a text logo to make it readable over differently colored backgrounds, such as on a slider or scroll down effect? While one approach could involve finding the dominant image color, this may be slow and ineff ...

javascriptjqueryhtmlcss

Place items at the lower part of the container rather than the top

My <ul> has a fixed height and I want the <li> elements inside it to stack at the bottom instead of the top. I attempted using vertical-align: bottom on the <ul>, but that didn't have any effect. The <li> content may overflow ...

htmlcssflexbox

I'm having trouble aligning my <div> element in the center and I'm not sure what the issue could be

I'm attempting to center the image. It seems like it should be a simple fix, but I've experimented with multiple solutions and even started from scratch three times. #main_image { background-color: bisque; position: fixed; display: block; ...

htmlcss

Generate and delete dynamic iFrames through variable manipulation

I'm currently developing a landing page specifically for our pilots to conveniently access weather information before taking off. However, due to the limitations posed by our computer security measures, I can only utilize iframes to obtain the necessa ...

javascripthtmlvariablesiframe

Expand the dimensions of the shinydashboard dashboard page

Currently, I am using shinydashboard and have formatted my ui code in the following way: ui = dashboardPage(skin="black", dashboardHeader(disable = T), dashboardSidebar(width=300), dashboardBody() ...

htmlcssrshinyshinydashboard

What is the best way to emphasize each div while utilizing jquery in this specific scenario?

Seeking a simple way to highlight every div using jQuery, but facing the challenge of having over one thousand items each with a unique ID that needs to be highlighted individually. Each item is represented by a div and must remain independent for user del ...

phpjqueryhtmlcss

What causes the error of 'undefined' when I try to append an HTML string to the main page with jQuery?

Looking for some advice on JavaScript and jQuery as I am relatively new to these languages. Currently working on a card game that will be played on one screen using JavaScript. Within the playerHand ID div, I have implemented a JavaScript function to disp ...

javascriptjqueryhtml

Is it possible to refresh HTML content using jQuery?

Currently, I am attempting to iterate through response data and integrate the values into the HTML of my webpage. It's crucial for me to clear any existing values in the HTML so that only the new ones are displayed, keeping it up-to-date. The structu ...

javascriptjquerydjangohtml

opacity of highcharts heatmap data points reduces to zero

Recently, I integrated a Heat Map feature from the Highcharts library into my app. However, I encountered a strange issue where certain rows of data were not displaying on the map. Please refer to the screenshot below for reference: Upon inspecting the el ...

javascriptjquerycsshighchartsheatmap

The CSS theme fails to adapt to changes made using jQuery

I encountered a peculiar problem while using a CSS theme with jQuery. After applying a custom CSS theme to a webpage, everything looked fine. However, when I performed certain operations using jQuery - like checking checkboxes causing others to be checked ...

jquerycssthemes

Safari displays an inexplicable gray border surrounding the <img/> element, despite the actual presence of the image

https://i.stack.imgur.com/4QR52.png There is an unexpected gray border visible around the dropdown image, as seen above. This occurrence has perplexed me because, according to several other queries, this problem arises when the image's src cannot be ...

csssafari

Method for verifying if the date has been altered within the specified date range picker

I am currently implementing the Bootstrap Date Range Picker and have a requirement that whenever a user changes the date range, the form should be submitted to fetch fresh data. Below is the code snippet I am using: $(document).ready(function (){ var s ...

jquerybootstrap-4daterangepickerbootstrap-daterangepicker

What could be causing my SVG bezier curves to malfunction in Firefox?

Encountered an issue today where diagrams I have generated are not functioning properly in Firefox when created using the getPointAtLength method. Here is a demonstration of the problem: http://jsfiddle.net/xfpDA/9/ Please take note of the comments at th ...

javascripthtmlfirefoxsvg

Ways to retrieve a webpage component that has multiple values within its class attribute

My dilemma lies in this HTML snippet: https://i.sstatic.net/E7zj0.png Within the code, there are two instances of <div class="sc-fjhmcy dbJOiq flight-information"></div>. I am trying to target these elements using their class attribu ...

htmlxmlselenium-webdriverweb-scrapingconsole

Guide to setting the first tab as the default tab using Thymeleaf, Css, and Bootstrap

I am currently working on a project where I need to dynamically create tabs based on a list retrieved from my Spring backend using Thymleaf and Bootstrap. While I have managed to successfully create the tabs and content, I am facing an issue where the fi ...

javascriptcssthymeleaf

How can I execute a function when ng-click is triggered on an <a> tag, and ensure it opens in a new tab?

I am facing an issue with an element in my code, which is as follows: <a ng-click="vm.openPage(page)">{{page.pageId}}</a> Within the vm.openPage() function, there are validations that need to be performed before redirecting to the page refere ...

javascripthtmlangularjs

Having trouble getting the jquery tabify plugin to work properly

I've put in a lot of effort and double-checked everything, but for some reason this tabify function just won't work. I have gone through my code 100 times but still can't seem to pinpoint the error. Here is the code I am working with: <! ...

javascriptjquerycss

What is the method for customizing the color of the drop-down arrow in

Is it possible to customize the color of the dropdown arrow while maintaining the same style? #cars{ width:150px; } <!DOCTYPE html> <html> <body> <select name="cars" id="cars"> <option value="volvo">Volvo</option& ...

htmlcssselectdrop-down-menudropdown

Learn how to easily navigate to your profile page by clicking on a button after logging into your account

I created a homepage with a button for users to either login or go to their profile. My intention is for the button to function as follows: When a user logs in, the button will display the username and clicking on it will take the user to their profile pa ...

phphtml

Transforming the data from my Event Viewer into a sleek and functional HTML table

I am working on a command to extract Event Viewer data and display it in a more user-friendly format. My goal is to convert the output to an HTML table and save it to a text file for inclusion in an email report. Here is what I have so far: $endTime = Get- ...

htmlpowershellevent-viewer