What are the steps to converting one grid to another solely with the use of Bootstrap utilities?

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

I am looking to convert the grid layout shown above into the grid layout displayed below. To achieve the above layout, I have used the following grid structure:

<div className="row">
    <div className="col-md-6">100</div>
    <div className="col-md-6">100</div>
    <div className="col-md-6">100</div>
    <div className="col-md-6">100</div>
    <div className="col-md-6">100</div>
    <div className="col-md-6">100</div>
  </div>

Although for a simple 2-column layout we can replace col-md-2 with col-md-6, I have a more intricate arrangement.

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Here's a simple solution using Bootstrap's flexbox order utility classes.

By applying the .col-6 class, you can achieve a 2-column layout until the md breakpoint. After that, switch to using the .col-md-2 class for a 6-column layout.

HTML Code

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

Screenshots

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

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

Check out the Demo

https://jsfiddle.net/davidliang2008/0f2qowre/5/

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

Scripting in jQuery to create dropdown menus

I've encountered a unique issue on my website where a user's selection from one list should update the values in another list: <form id="form1"> <div> <select id="workField"> <option value ...

javascriptjqueryhtmljquery-mobile

Tips for incorporating extensive amounts of HTML into Internet Explorer without causing excessive strain on the CPU

I have been exploring a more ajax-based approach to loading data on a page in order to avoid postbacks. I can easily retrieve server-generated HTML through an ajax call, and adding it to the DOM is straightforward with jQuery's .append or .replaceWith ...

jqueryhtmlajaxinternet-explorerdom

Using JavaScript to implement responsive design through media queries

The code seems to be having some issues as it only works when I reload the page. I am looking to display certain code if "size < 700" and other code if "size > 699". I also tried this code from here: <script> function myFunction(x) { if ( ...

javascripthtmlmpmediaquery

Is it possible to refresh text in table without clearing icons?

Is there a way to maintain icons in table rows when editing text fields from a dialog? Currently, regardless of whether I use .html() or .text(), the icons disappear. I suspect that utilizing .content() may be a solution, but I'm unsure how to impleme ...

javascriptjqueryhtmltextreplace

What is the best way to keep an image centered in the nav-bar as it decreases in size?

As I work on building a website using a template (https://github.com/learning-zone/web-templates/tree/master/victory-school-free-html5-bootstrap-template), I encountered an issue with the navigation bar. The original design appears like this: Before shrin ...

javascripthtmlcss

What are the best methods for aligning pseudo elements vertically?

I am facing an issue with the placement of a before and after pseudo element for articleSubTitle. The problem occurs when the text from articleSubTitle wraps to a new line within a small container or on mobile devices. This causes the after element to appe ...

htmlcss

Creating grid layouts in Bootstrap 4 with buttons

Recently, I've delved into Bootstrap 4 and HTML5/CSS. My goal is to design a text area with two buttons located on the side (horizontally centered) like this: https://i.sstatic.net/TnHSy.png Below is the code snippet that I have so far: <link ...

htmltwitter-bootstrapbootstrap-4

Using HTML and CSS, we can achieve a fixed position using the `position: sticky`

On my website, I have elements that utilize transformations. One issue I've encountered is that these transformations end up resizing the viewport. Normally, I would address this by setting overflow-x: hidden for both html and body, but doing so disru ...

htmlcsscss-transformssticky

What is the limit for table size in HTML5 Web SQL DB?

Currently, I am in the process of developing a rather intricate HTML5 web app that obtains its data from a Web Service to populate the Web SQL database. Initially, everything was running smoothly with test data. However, when I attempted to use actual dat ...

sqlsqlitehtmlgoogle-chromewebkit

What role does the 'node_modules' directory play in a project?

Can you explain the purpose of the node_modules folder? When libraries are downloaded using npm, they are stored in the node_modules folder. To save space when uploading to platforms like GitHub, this folder is typically ignored and dependencies can be in ...

jquerynode.jsnpmbootstrap-4node-modules

Submit a form to the same page without reloading and toggle the visibility of a div after submission

Is there a way to submit a form without refreshing the page and hiding the current div while showing a hidden one? I attempted to use the following code, but it ends up submitting the form and reloading the page. <form method="post" name="searchfrm" a ...

phpjavascripthtml

Make a line break occur automatically after every 7 divs are displayed

Looking to create a grid of equal height and width divs using AngularJS to form a 7x5 square: ---------------------- | | | | | | | | ---------------------- | | | | | | | | ---------------------- | | | | | | | | ---------------------- ...

htmlcssangularjs

Is it possible to remove htmlescape from the custom options in Magento? Can you specify which file showcases the custom

Looking to incorporate HTML into custom option labels for products on my Magento store. Unfortunately, Magento does not parse HTML by default when it is placed in the custom options interface. I suspect there may be a line like "$this->htmlEscape()" wit ...

phphtmlmagentoe-commerce

Utilizing ng-if within ng-repeat for dynamically generated option tags in HTML and AngularJS

I am using AngularJS to create a dropdown menu with select and option tags. The menu is referencing a model and looks like this: <select id="edit-location" class="" ng-model="packageLoc"> <option ng-repeat="x in loc" value="{{ x.locationId }} ...

javascripthtmlangularjsangularjs-ng-repeatangular-ng-if

Numerous categories housed within various div containers

I am working with an HTML code that contains 6 different div elements: <div class="hisclass1 hisclass2 myclass hisclass3"> <div class="herclass1 herclass2"> <!-- 2nd div --> </div> </di ...

htmlcss

What is the best way to pass a variable value from a JavaScript function to a Python function within a Django framework

My goal is to use HTML and JavaScript to scan a QR code in nurse_home.html. I have successfully scanned and viewed the content of the QR code on the website, but I am facing an issue with POSTing the QR code output represented by <output type='POST ...

javascriptpythonhtmldjangoqr-code

What is the best way to make a flexbox stretch to fill the entire screen

Can someone guide me on how to ensure my flexbox expands to fill the entire screen? I am working on a website and I want to eliminate any empty spaces from it. >> https://i.sstatic.net/uAooe.png I have attempted setting margin and padding to zero b ...

htmlcssflexbox

Setting the line-height property in CSS to a value greater than the font-size property

Dealing with a frustrating issue where I want to align the top of an image with text, but the letters end up slightly below the line height. Check out this simple example featuring a classic movie: HTML: <img src="http://cf2.imgobject.com/t/p/w92/wcI ...

htmlstylescsstext-size

Working with jQuery, CSS, and functions to modify the current tag's class

Let's keep it brief and straightforward: Here is my HTML <div id="headerVideoControls" class="overlayElement"> <div id="videoMuteUnmute" onclick="muteUnmuteVideo('headerVideo')">mute button</div> </div> Edited ...

javascriptjqueryhtmlcssaddclass

Is a Selenium loop a viable option?

</head> <body> <table cellpadding="1" cellspacing="1" border="1"> <thead> <tr><td rowspan="1" colspan="3">test</td></tr> </thead><tbody> <tr> <td>click& ...

javascriptjqueryhtmlselenium-ide