Changing the order on mobile devices in Bootstrap 4: A quick guide

Currently, I am working on a responsive layout using Bootstrap 4 with two columns. Each column contains a total of 9 divs - four in the first column and five in the second column. My goal is to rearrange the order of the divs within the columns when the viewport size is below LG breakpoint.

Here is an overview along with the desired order:

https://i.stack.imgur.com/O4rpp.png

This is what I have at the moment:

<div class="container">
    <div class="row">
        <div class="col-lg-8">
            <div class="mb-4">
                left 1
            </div>
            <div class="mb-4">
                left 2
            </div>
            <div class="mb-4">
                left 3
            </div>
            <div class="mb-4">
                left 4
            </div>
        </div>
        <div class="col-lg-4">
            <div class="mb-4">
                right 1
            </div>
            <div class="mb-4">
                right 2
            </div>
            <div class="mb-4">
                right 3
            </div>
            <div class="mb-4">
                right 4
            </div>
            <div class="mb-4">
                right 5
            </div>
        </div>
    </div>
</div>
htmlcssbootstrap-4

Answer №1

Bootstrap 4 allows for the visual order of columns to be changed by utilizing flexbox. The responsive ordering classes with flex can be applied, specifying different orders for each viewport size.
By using classes like order-xs-12, order-sm-2, order-md-0, order-lg-5, and order-xl-last, column orders ranging from 0-12 can be specified, along with order-first and order-last for the first and last columns respectively.

<div class="container">
 <div class="row ">
   <div class="col-lg-8 col-md-6 col-sm-12 d-flex flex-column ">
     <div class="mb-4">
     left 1
     </div>
     <div class="mb-4 bg-info order-sm-last order-md-first order-lg-last ">
     left 2
     </div>
     <div class="mb-4">
     left 3
     </div>
     <div class="mb-4">
     left 4
     </div>
   </div>
   <div class="col-lg-4 col-md-6 col-sm-12 d-flex flex-column">
     <div class="mb-4">
     right 1
     </div>
     <div class="mb-4">
     right 2
     </div>
     <div class="mb-4 bg-success order-lg-last order-md-first order-sm-first">
     right 3
     </div>
     <div class="mb-4">
     right 4
     </div>
     <div class="mb-4">
     right 5
     </div>
   </div>
</div>
</div>

On Larger Screen https://i.stack.imgur.com/hG5B6.png

On Medium Screen https://i.stack.imgur.com/R5Yzq.png

On Small Screen https://i.stack.imgur.com/nw6eG.png

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

Issue with fadeout() on absolutely positioned element loaded via AJAX in jQuery

Currently, I am utilizing AJAXify on a website project to implement page transitions and encountering some abnormal behavior with jQuery. Below is my code: HTML (I am transitioning through backgrounds using jQuery) <div id="backgrounds"> <img s ...

jquerycssajax

What is the functionality of 'min-height: 100vh' when child elements stack due to a small width?

In a parent element, I have two child elements: <div id="registration"> <div id="left-panel"></div> <div id="right-panel"></div> </div> The styling is as follows: #registration{ @include l { flex-dire ...

htmlcss

Assistance needed with CSS - making an element occupy the entire remaining vertical space

Although I'm quite confident in my CSS/XHTML abilities, this particular issue has me stumped. You can view the problem here: - (please note that the website is still under development, most features are not functional, and it's subject to frequ ...

cssxhtml

Trouble with buttons in table cells

There is a problem with a button placed in a table cell that spans two rows and does not fill the second row. How can I ensure that this button fills both rows? I have attempted to adjust the height in the button's style as well as in the table cell i ...

htmlcssbuttonhtml-table

Tips for creating a customized dropdown menu that opens upwards without relying on Bootstrap

Looking for some assistance with creating an animated dropdown menu that slides upwards. Any help is appreciated! $('.need-help').click(function() { $('.need_help_dropdown').slideToggle(); }); .need-help { background:url(../im ...

javascriptjqueryhtmlcss

AngularJS | Using ngAnimate to Display Form Validation Errors

My form errors are currently being displayed successfully using CSS and conditional classes, but I recently discovered ng-message and ng-animate. Would it be possible to use ng-message to contain the error messages? Also, I have been unable to find any tu ...

htmlcssangularjsng-animate

Learn how to align a form to the right using HTML, CSS, and Bootstrap

I am completely new to front-end technology. I have been attempting to write some code for my backend app using Html, Css, and Bootstrap. Currently, I am trying to place a search form on the right side of my webpage. Can anyone help me figure out what I am ...

htmlcssbootstrap-4

Text vanishing upon the loading of an HTML webpage

I am experiencing an issue where the text on my webpage disappears after it loads, and I am struggling to figure out the cause. (I did not create the site) The white text displayed on top of the header image initially appears correctly but then vanishes. ...

jqueryhtmlcss

Displaying the "Ad Blocker Detected" image next to the advertisement

I am attempting to create a feature where if adblock is enabled, an image will display behind the ad banner on my website with the message "Please consider disabling adblock". Unfortunately, it is only showing up as a bordered box. Here is how the box ap ...

htmlcss

Display a helpful tooltip when hovering over elements with the use of d3-tip.js

Is it possible to display a tooltip when hovering over existing SVG elements? In this example, the elements are created during data binding. However, in my case, the circles already exist in the DOM and I need to select them right after selectedElms.enter ...

javascripthtmld3.jssvg

Simply click and drag a document from your file explorer directly into the desired text field to instantly generate a clickable

I am interested in dragging a file from our Windows server and dropping it onto a text area on a webpage. The link that would be generated will look something like this: <a href="\\fileserver\folder\pizza_2.pdf">filename.pdf< ...

javascriptjqueryhtmlwindowsexplorer

Leveraging a common element throughout various partial views

In my ASP.Net MVC 3 application, I have various controllers and actions that display pop-up dialog windows for user input. One important aspect of these dialogs is the faded mask that appears behind them. Each dialog window control resides in a separate P ...

htmlasp.net-mvc-3partial-views

Guide on creating my inaugural HTML embeddable widget?

A client recently requested me to create a JavaScript (MooTools)/HTML/CSS/PHP based game as a deployable widget. This will be my first time developing a widget, so I am seeking advice and insights to help me navigate any potential challenges from experie ...

phpjavascripthtmlcsswidget

Unable to conceal element if it is devoid of content

<div id="web-link" class="infoline"> <i class="fa fa-link fa-2x fa-fw coloriconfa"></i> <a href="<?=$data['post']['url']?>" target="_blank"><?=$data[ ...

javascripthtml

Visual Composer now appends "?id=" to the background images of columns and rows, enhancing the customization

I am in the process of improving the performance of a WordPress site that is using the Visual Composer plugin. When checking GTmetrix results, I came across this issue: Ensure resources are served from a consistent URL https://example.com/wp-content/uploa ...

phpcsswordpresspagespeedvisual-composer

What method would you recommend for modifying HTML text that has already been loaded using JSP?

Is there a way to update text on an HTML document without reloading the entire page? I'm looking to create a simple "cart" functionality with 5 links on a page. When a link is clicked, I want it to increment the "items in cart" counter displayed on th ...

javascriptjavahtmljsp

Is the parallax effect achieved by stacking one div on top of another div?

Here is a sample of my HTML code: <div id="a" class="panels">FIXED PANEL</div> <div id="b" class="panels">Scrolling-Panel 1</div> <div id="c" class="panels">Scrolling ...

htmlcssparallax

Is there a way to align the image block-grid from left to right?

Is there a way to change the alignment of images in the x-block-grid four-up class to be RTL on this page? () I have managed to make the h2 tag RTL using the following code: <h2 class="h-custom-headline h5 accent" dir="rtl"><span>Code</spa ...

htmlcssalignment

To close the responsive menu, simply click anywhere outside of the navigation bar

My issue involves a responsive menu with Bootstrap. On desktop, the menu closes fine; however, on the responsive view, I want it to close when clicking outside of the nav menu in any area. Here is my navigation code: <!-- Navigation --> <nav id= ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the method for presenting text based on the chosen Select Option?

I attempted to achieve this using hrefs and ids, but it did not meet my requirements. This is the desired format: div.selectcountry { margin-bottom: 10px; font-family: arial; font-size: 12px; } div.countrydepartment { font-family: ...

javascriptjqueryhtmlcss