Click here to Skip to main content
15,906,626 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
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

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
 
v2
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
 
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
 

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



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