Click here to Skip to main content
15,887,175 members
Search within:


How can change element order with bootstrap 5.3?
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
CSS
HTML
bootstrap
Hi I create header with bootstrap 5.3. I want different order in small and another size of screen. for this I use "order-sm-*", but the element change in another size with this. how to fix this problem?

What I have tried:

also my body is rtl. I do not know if this related or not .this is my original header:
HTML
<pre>    <header class="sticky-top">
        <nav class="navbar navbar-expand-sm navbar-dark bg-light">
            <div class="container-fluid">
                <button id="collaps-button"  class=" navbar-toggler " type="button" data-bs-toggle="collapse" data-bs-target="#mynavbar">
                    <svg  width="35" height="35" fill="black" class="bi bi-list" viewBox="0 0 16 16">
                        <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z" />
                    </svg>
                </button>

                <a id="logo" class="navbar-brand mx-auto"  href=""><img src="~/image/theme/i want app logo.png" style="width:50px;" /> </a>
             
                <div  class="collapse navbar-collapse" id="mynavbar">
                    <ul class="navbar-nav ml-auto" id="mynavbar2">
                        <li class="nav-item">
                            <a class="nav-link" href="">Home</a>
                        </li>
                       
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle  " href="#" role="button" data-bs-toggle="dropdown">stor</a>
                            <ul class="dropdown-menu dropdown-menu-end text-end " style="background-color:lightgray">
                                <li><a class="dropdown-item  " href="~/Shop">all</a></li>
                                <li><a class="dropdown-item  " href="#">cat 1</a></li>
                                <li><a class="dropdown-item  " href="#">cat 2</a></li>
                                <li><a class="dropdown-item " href="#"> cat 3</a></li>
                            </ul>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="">about us</a>
                        </li>
                        
                    </ul>
                   
                </div>
               

                <button id="main-search-button" class="nav-item  btn bg-transparent " type="button" @*style="position:fixed; top: 17px; left: 90px;"*@>
                    <svg width="30" height="30" fill="black" class="bi bi-search" viewBox="0 0 16 16">
                        <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
                    </svg>
                </button>

                <a id="CartLink" class="nav-item mx-1 " href="" @*style="position:fixed; top: 20px; left: 50px;"*@>
                    <svg width="30" height="30" fill="black" class="bi bi-cart" viewBox="0 0 16 16">
                        <path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .491.592l-1.5 8A.5.5 0 0 1 13 12H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l1.313 7h8.17l1.313-7H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" />
                    </svg>
                </a>

                <a id="SignInLink" href="" class="nav-item " @*style="position:fixed; top: 20px; left: 10px;"*@>
                    <svg  width="30" height="30" fill="black" class="bi bi-person-circle" viewBox="0 0 16 16">
                        <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z" />
                        <path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z" />
                    </svg>
                </a>
               

                <form id="form-item" class="d-flex d-none  w-100 mx-1">
                    <input class="form-control " type="text" placeholder="Search">
                    <button class="btn bg-transparent" type="button">
                        <svg  width="30" height="30" fill="black" class="bi bi-search" viewBox="0 0 16 16">
                            <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
                        </svg>
                    </button>
                    <button class="btn bg-transparent" type="button" id="CancelButton">
                        <svg  width="30" height="30" fill="black" class="bi bi-x-circle" viewBox="0 0 16 16">
                            <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
                            <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
                        </svg>
                    </button>
                </form>
            </div>
        </nav>
    </header>

and i want this order in small screen:
<pre lang="HTML"    <header class="sticky-top">
        <nav class="navbar navbar-expand-sm navbar-dark bg-light">
            <div class="container-fluid">
                <button id="collaps-button"  class=" navbar-toggler " type="button" data-bs-toggle="collapse" data-bs-target="#mynavbar">
                    <svg  width="35" height="35" fill="black" class="bi bi-list" viewBox="0 0 16 16">
                        <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z" />
                    </svg>
                </button>

                <a id="logo" class="navbar-brand mx-auto"  href=""><img src="~/image/theme/i want app logo.png" style="width:50px;" /> </a>
                <button id="main-search-button" class="nav-item  btn bg-transparent " type="button" @*style="position:fixed; top: 17px; left: 90px;"*@>
                    <svg width="30" height="30" fill="black" class="bi bi-search" viewBox="0 0 16 16">
                        <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
                    </svg>
                </button>

                <a id="CartLink" class="nav-item mx-1 " href="" @*style="position:fixed; top: 20px; left: 50px;"*@>
                    <svg width="30" height="30" fill="black" class="bi bi-cart" viewBox="0 0 16 16">
                        <path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .491.592l-1.5 8A.5.5 0 0 1 13 12H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l1.313 7h8.17l1.313-7H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" />
                    </svg>
                </a>

                <a id="SignInLink" href="" class="nav-item " @*style="position:fixed; top: 20px; left: 10px;"*@>
                    <svg width="30" height="30" fill="black" class="bi bi-person-circle" viewBox="0 0 16 16">
                        <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z" />
                        <path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z" />
                    </svg>
                </a>
                <div  class="collapse navbar-collapse" id="mynavbar">
                    <ul class="navbar-nav ml-auto" id="mynavbar2">
                        <li class="nav-item">
                            <a class="nav-link" href="">Home</a>
                        </li>
                       
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle  " href="#" role="button" data-bs-toggle="dropdown">stor</a>
                            <ul class="dropdown-menu dropdown-menu-end text-end " style="background-color:lightgray">
                                <li><a class="dropdown-item  " href="~/Shop">all</a></li>
                                <li><a class="dropdown-item  " href="#">cat 1</a></li>
                                <li><a class="dropdown-item  " href="#">cat 2</a></li>
                                <li><a class="dropdown-item " href="#">cat 3</a></li>
                            </ul>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="">درباره ما</a>
                        </li>
                        
                    </ul>
                   
                </div>
               

               
               

                <form id="form-item" class="d-flex d-none  w-100 mx-1">
                    <input class="form-control " type="text" placeholder="Search">
                    <button class="btn bg-transparent" type="button">
                        <svg  width="30" height="30" fill="black" class="bi bi-search" viewBox="0 0 16 16">
                            <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
                        </svg>
                    </button>
                    <button class="btn bg-transparent" type="button" id="CancelButton">
                        <svg  width="30" height="30" fill="black" class="bi bi-x-circle" viewBox="0 0 16 16">
                            <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
                            <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
                        </svg>
                    </button>
                </form>
            </div>
        </nav>
    </header>
>
Posted
Updated 16-Jul-23 23:13pm
Add a Solution

3 solutions

You are looking to use Media Query properties for alignment of elements based on screen sizes. Tutorial on the properties with sample code is at - Responsive Web Design - Media Queries
[^]
 
Share this answer
 
Posted
Bootstrap's responsive classes apply to the specified screen resolution or greater:
Breakpoints · Bootstrap v5.3[^]

order-sm-* will apply on any screen whose width is greater than or equal to 576px.

If you want to specify a different order for "medium" screens (≥ 768px), then you need to change your approach.

The simplest option would be to output your elements in the correct order for small screens, and then use order-md-* classes to reorder them for larger screens.
 
Share this answer
 
Posted
Looking at it slightly differently to Richard... Bootstrap adds unnecessary overhead and slows down the loading of your website.

I find the best solution is to dump frameworks like Bootstrap as you have to bend to their will and make compromises. They were designed years ago to negate the differences and quirks with the browsers, mainly IE. Now, there are effectively 3 different layout engines, Chromium (Chrome, Edge, Opera, brave, Vivaldi, etc..), FireFox, and Safari, and they're pretty close with compatibility, so frameworks like Bootstrap are no longer needed.

There are many top-notch CSS devs out there putting out YouTube videos, blogs/articles, training, etc like Kevil Powell[^], Stephanie Eckles[^], Web Dev Simplified[^] , and many others. Then you have Can I use...[^] to help navigate browser compatibility.

The best learning tools are the browser developer tools[^] . You can look at pages with content that you want to learn/copy. You can also modify the CSS and learn live.

It's a bit scary at first to remove the bootstrap training wheels, however, long-term, the benefits out weigh the risks and you will find that you can do far more than the limitation of CSS frameworks like Bootstrap.
 
Share this answer
 
Posted
Updated 16-Jul-23 23:16pm
v2
Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month
Related Questions
How can change location of button slideshow in bootstrap 5?
Can someone explain how bootstrap navigation changes look?
How to change the position of elements in dialog dynamically in mfc?
Changes in a variable also changing an array element
How to change property of element from outside of mainwindow.vb in WPF ?
Issue with my bootstrap meta tag that failing entire site
Reading elements from STL SET on the basis of order of insertion?
Hot to get value from bootstrap popup to main page and set the value into a input element
How do I go about printing the elements in the array in the reverse order?
How can I change the style of dropdown submenu in bootstrap navbar

Advertise
Privacy
Cookies
Terms of Use
Last Updated 17 Jul 2023
Layout: fixed | fluid
Copyright © CodeProject, 1999-2024
All Rights Reserved.

Web04 2.8:2024-04-02:1

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900