Reorder List Items in Collapsible Accordion in Bootstrap 4

I previously attempted to implement the solution provided atHow do I change Bootstrap 3 column order on mobile layout?, however, it only works with bootstrap3. I am looking to rearrange the order of the navbar when it is collapsed on a small screen.

Here is my current navbar code:

  <a class="navbar-brand" href="#">Website Name</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav  ml-auto">




      <li class="nav-item ">
        <a class="nav-link" href="#">1</a>
      </li> 
      <li class="nav-item  ">
        <a class="nav-link" href="#">2</a>
      </li>
     <li class="nav-item   ">
        <a class="nav-link" href="#">3</a>
      </li>
       <li class="nav-item   ">
        <a class="nav-link" href="#">4</a>
      </li>
       <li class="nav-item ">
        <a class="nav-link" href="#">5</a>
      </li>
     <li class="nav-item active   ">
        <a class="nav-link" href="#">6 <span class="sr-only">(current)</span></a>
      </li>
  </div>
</nav>

When collapsed, the links are displayed as:

|1|
|2|
|3|
|4|
|5|
|6|

My goal is to display them in the following order:

|6|
|5|
|4|
|3|
|2|
|1|

Any suggestions on how to achieve this using bootstrap 4?

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

One way to achieve the desired layout is by applying the classes flex-column-reverse flex-md-row to the navbar-nav element...

Check out this example for reference.

<ul class="navbar-nav ml-auto flex-column-reverse flex-md-row">
     <li class="nav-item">
           <a class="nav-link" href="#">1</a>
     </li>
     ...
</ul>

The flex-column-reverse class reorders items in a column on smaller screens, while flex-md-row maintains row order on larger screens.

Note: The example uses flex-md-row based on the navbar-expand-md breakpoint, so make sure to adjust it according to your specific navbar-expand-* settings.

Answer №2

To achieve this layout, utilize vanilla CSS3 and the flex property as demonstrated below:

@media (max-width: 1024px){
    ul.navbar-nav {
      display: flex;
      flex-direction: column;
    }
    ul.navbar-nav li:first-child {
      order: 6;
    }
    ul.navbar-nav li:nth-child(2) {
      order: 5;
    }
    ul.navbar-nav li:nth-child(3) {
      order: 4;
    }
    ul.navbar-nav li:nth-child(4) {
      order: 3;
    }
    ul.navbar-nav li:nth-child(5) {
      order: 2;
    }
    ul.navbar-nav li:nth-child(6) {
      order: 1;
    }
}

Note: Adjust the 1024px value to match the mobile-view breakpoint of your website.

See a live example in this jsfiddle link: https://jsfiddle.net/s51d06k6/300/

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

Is there a way to prevent an iframe from being recorded in Chrome's browsing history?

I'm in the process of developing a Chrome extension that inserts an Angular application into the user's browser window to create an interactive sidebar. I've been successful in most of my goals by inserting an iframe through a content script ...

javascripthtmlangularjsgoogle-chrome-extensionbrowser-history

Angular bindings expression involving HTML elements

Can HTML elements be inserted in an Angular expression? Let's explore a few examples. For instance, we might want to achieve something like this: <table> <tr ng-repeat="employee in employees"> <td>{{employee.firstname ? ...

htmlangularjs

What is the best way to adjust the width and height of react-flip-page through CSS for different media queries?

Incorporating the react-flip-page npm package to add animation to a book on my web application has been exciting. However, I've encountered an issue with adjusting the width when using media queries due to the available props for setting size and colo ...

cssreactjsnpmmedia-queries

Having trouble using CSS to darken a background image in React?

My website (React.js) is giving me trouble with darkening the background image. I have attempted to darken the background image without success, even after trying the solution found here. I am utilizing the latest version of the Google Chrome browser for ...

cssreactjs

What is the best way to implement rotation functionality for mobile devices when dragging on a 3D globe using D3.js and an HTML canvas?

I have been experimenting with the techniques demonstrated in Learning D3.js 5 mapping to create a 3D globe and incorporate zoom and rotation functionalities for map navigation. Here is the function that handles both zooming and dragging on devices equipp ...

javascripthtmld3.jscanvas

Incorporating a delete button onto an image using JavaScript

I am currently developing a BlogApp and facing difficulty in attempting to include a button on an image. The image is being retrieved from the Django database in JavaScript (HTML). My goal is to have a clickable button overlaid on the image. views.py def ...

javascriptpythonhtmldjangodjango-views

The inline-block property can become unstable when dealing with a large number

When I create a parent container div with three child divs and set the display property to inline-block, everything looks great on jsfiddle CSS #container { border: 1px solid blue; padding: 2px; display: inline-block; } .child { width: ...

htmlcss

Issue with PageSpeed and Lighthouse showing NOT_HTML error post recent update

Our team decided to utilize the tool at for assessing the speed of our website. This tool has been effective in analyzing our site's URLs for some time now. However, recently we have encountered an issue where we receive the following error message: ...

htmlpagespeedlighthouse

Angular 10 encountering issues with loading Bootstrap styles

I'm currently working on a project that involves Angular 10 and the Bootstrap library. However, I'm encountering an issue where the Bootstrap styles are not loading properly. Upon checking the package.json file, I can see that Bootstrap is liste ...

cssangularvisual-studiobootstrap-4

What is the method for achieving a seamless rosace effect in CSS?

While working on my website, I added an interesting effect to a circle. Currently, the circle opens automatically when hovering the mouse over it and closes when the mouse moves away. However, I would like to modify it so that it automatically opens and cl ...

htmlcsscss-transitions

Creating a customizable range input for pixel values: a step-by-step guide

I am looking to design a pixel range input. Here is an example: let slider = document.querySelector("input"); slider.addEventListener("change", () => { console.log(slider.value); }); <input type="range" min="5px" max="50px"> However, the r ...

javascripthtml

Unable to apply 3rd condition with ngClass into effect

I've been attempting to incorporate a third condition into my ngClass. Initially, I managed to get two classes working in my ngClass to change the row colors alternately. [ngClass]="{ totalrow:i%2 != 0, odd:i%2 == 0}" Now, I'm trying to introdu ...

cssangular

What could be causing ReactNative Dimensions component to display lower resolutions?

Currently, I am developing an application using React Native v0.45.1 and testing it on my S6 device. Despite setting a background image that matches the resolution of my phone, it appears excessively large on the screen, cutting off most of the content. T ...

androidcssreactjsreact-nativebackground

Is there a way to integrate a <h1> Title </h1> inside the Bootstrap 4 Table?

https://i.sstatic.net/nSiax.png I have successfully added a background picture to my website. In order to ensure that the headings and information in my table are visible, I applied a white background to it. However, this did not include the Generator S ...

bootstrap-4html-tablebackground-color

php passing values to PHP with hashtags in the URL

When sending a value to a PHP file which includes the character # and other special characters, how can I retrieve the actual value? window.location.href = "somepage.php?w1=" data-target="#myModal1" ; The PHP script returns the value as data-target="! ...

phphtml

What could be causing the unexpected white space at the top of the webpage, right above the navigation bar?

Take a look at the code provided on this link: I attempted to address the issue by removing the Scroll Bar in CSS, assuming it was caused by overflow-x. However, the blank space above the navigation bar persists. Upon inspecting the page using the Browser ...

htmlcssdocument-body

What is the process of modifying a list using a custom tag in JSP?

I encountered an issue with a custom tag in JSP. When the page finishes loading, the HTML content list generated by the div custom tag appears. I then aim to replace this list with new data using AJAX. First, I clear out the old list and create an HTML str ...

htmlajaxjspappendcustom-tag

Generate individual div containers and populate them with content from specific files using an ajax request

Hey there! I'm grappling with the code below, which is supposed to iterate through a directory of HTML files. Each file should be loaded into its own div with the class ".module". While my code successfully retrieves the directory and file names, it&a ...

javascriptjqueryhtmlajax

The datepicker on mobile devices fails to display the default text of dd/mm/yyyy

This JSP code uses Bootstrap5: <form action="" method="GET" class="row g-1 mb-3 "> <div class="col-lg-2 col-md-4 col-6 mb-2"> <input type="date" class="form-control" name=" ...

htmlcssbootstrap-5

Ways to correctly import various CSS files for individual routes in a Vuejs application

Currently, I am in the process of developing a project using Vue.js and Laravel. This project will have distinct layouts for the admin/user panel and landing page, requiring different CSS files to be loaded for each route. At the moment, I am utilizing va ...

javascriptcsslaravelvue.jslayout