On smaller screens, the top placement of right sidebar links is necessary

Our website layout is organized into 3 main sections: the top part contains the main menu, followed by the main content and a sidebar specific to each page.

The main content and sidebar are structured using bootstrap col-* classes.

On small screens, I encountered an issue where the sidebar was appearing below the main content instead of above it. I attempted to use d-flex, row-reverse, and col-reverse classes to no avail.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e3818c8c979097918293a3d6cdd3cdd1">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
    <main role="main">
        <div class="container">
            <div class="row d-flex">
                <div class="col-sm-12 col-md-8">
                    this is the main content. this is the main content.this is the main content. <br />
                    this is the main content. this is the main content.this is the main content. <br />
                    this is the main content. this is the main content.this is the main content. <br />
                    this is the main content. this is the main content.this is the main content. <br />
                    this is the main content. this is the main content.this is the main content. <br />
                    this is the main content. this is the main content.this is the main content. <br />
                    this is the main content. this is the main content.this is the main content. <br />
                </div>
                <div class="col-sm-12 col-md-4">
                    <h3>Sidebar</h3>
                    <ul class="list-group">
                        <li class="list-group-item"><a href="#">Sidebar Link 1</a></li>
                        <li class="list-group-item"><a href="#">Sidebar Link 2</a></li>
                        <li class="list-group-item"><a href="#">Sidebar Link 3</a></li>
                        <li class="list-group-item"><a href="#">Sidebar Link 4</a></li>
                        <li class="list-group-item"><a href="#">Sidebar Link 5</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </main>

javascripthtmlcssbootstrap-4

Answer №1

I made a modification to the class from row to flex-column-reverse

The result is as expected, with the sidebar positioned above the main content.

You can further adjust this layout using media queries based on screen size.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a8cac7c7dcdbdcdac9d8e89d8698869a">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
    <main role="main">
        <div class="container">
            <div class="d-flex flex-column-reverse">
                <div class="col-sm-12 col-md-8">
                    This is the main content. This is the main content. This is the main content. <br />
                    This is the main content. This is the main content. This is the main content. <br />
                    This is the main content. This is the main content. This is the main content. <br />
                    This is the main content. This is the main content. This is the main content. <br />
                    This is the main content. This is the main content. This is the main content. <br />
                    This is the main content. This is the main content. This is the main content. <br />
                    This is the main content. This is the main content. This is the main content. <br />
                </div>
                <div class="col-sm-12 col-md-4">
                    <h3>Sidebar</h3>
                    <ul class="list-group">
                        <li class="list-group-item"><a href="#">Sidebar Link 1</a></li>
                        <li class="list-group-item"><a href="#">Sidebar Link 2</a></li>
                        <li class="list-group-item"><a href="#">Sidebar Link 3</a></li>
                        <li class="list-group-item"><a href="#">Sidebar Link 4</a></li>
                        <li class="list-group-item"><a href="#">Sidebar Link 5</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </main>

Answer №2

Utilizing column ordering in Bootstrap provides a simple and effective way to achieve this layout. For more information, refer to the official documentation for Bootstrap 5, where columns are ordered from 1 to 6.

It's important to remember that Bootstrap follows a mobile-first approach. By using classes like order-1, we can control the order of elements on different screen sizes. For instance, applying order-1 positions the sidebar before the main content on screens below 576px resolution, while order-md-2 reorders them for screens larger than 768px.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="36545959424542445746760318061804">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />
<main role="main">
  <div class="container">
    <div class="row d-flex">
      <div class="col-sm-12 col-md-8 order-2 order-md-1">
        This is the main content. This is the main content. This is the main content. <br /> This is the main content. This is the main content. This is the main content. <br /> This is the main content. This is the main content. This is the main content.
        <br /> This is the main content. This is the main content. This is the main content. <br /> This is the main content. This is the main content. This is the main content. <br /> This is the main content. This is the main content. This is the main
        content. <br /> This is the main content. This is the main content. This is the main content. <br />
      </div>
      <div class="col-sm-12 col-md-4 order-1 order-md-2">
        <h3>Sidebar</h3>
        <ul class="list-group">
          <li class="list-group-item"><a href="#">Sidebar Link 1</a></li>
          <li class="list-group-item"><a href="#">Sidebar Link 2</a></li>
          <li class="list-group-item"><a href="#">Sidebar Link 3</a></li>
          <li class="list-group-item"><a href="#">Sidebar Link 4</a></li>
          <li class="list-group-item"><a href="#">Sidebar Link 5</a></li>
        </ul>
      </div>
    </div>
  </div>
</main>

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

The async/await feature is not pausing for the completion of the async.map function call

I'm encountering an issue in my Node.js app where I need to gather and format data using a helper function for an API endpoint. The problem arises when trying to loop through an array and make asynchronous calls to the database for each entry. Despite ...

javascriptnode.jsasync-await

Popover disappears when scrolling the page, but its position remains constant in Angular 4+

After clicking on an icon, a popover appears. I've noticed that the popover has a delay set, but when I scroll, the popover also moves along with it. Is there a way to keep the popover in place and not have it affected by scrolling? <md-badge cla ...

htmlcssangularpopover

Is it possible to use JavaScript to clear a field that was generated by Yii CRUD?

Issue with Yii's GRUD field generated and Firefox HTML: <?= $form->field($model, 'productId')->textInput(['maxlength' => true]) ?> Comparison of PHP generated code to Firefox HTML: <input id="taolistforcreate-p ...

javascriptphpjqueryyii

What is the best way to customize the color of the border and icon in an outlined MaterialUI input field

I'm a newcomer to materialUI and I have a question regarding customizing an outlined input field with an icon. Due to my dark background, I need the icon, border, and text color to be lighter, such as grey. Can someone please advise on the materialUI ...

cssreactjsmaterial-ui

Retrieving Information from MongoDB Collection with Paginated Results in Universal Sorted Sequence

I'm in the process of working on a project that involves a MongoDB collection called words, which holds a variety of words. My objective is to retrieve these words in a paginated manner while ensuring they are globally sorted in lexicographical order. ...

javascriptnode.jsmongodbexpresssorting

Customizing Google Maps API v3: Utilizing Custom Images as symbolPath Instead of Default Symbols

Recently, I discovered the fascinating feature called Symbol Animation in Google API's documentation. All aspects of my code are functioning optimally; however, I am curious to know if it is possible to substitute an image for a symbol in the followi ...

javascriptjquerygoogle-mapsgoogle-maps-api-3google-maps-markers

Creating a Query String in a web URL address using the state go method in Angular State Router

On my product list page, there is a list of products. When I click on a particular product, a function is called that uses state.go. Issue with dynamic functionality: $state.go('home.product.detail', { 'productID': "redminote4", &apo ...

javascriptangularjsangularjs-directiveangular-ui-routerangular-ui

Upon migrating from Vue CLI 2 to 3, an error is thrown stating: "Cannot locate element: #app" and an empty body is

Currently, I am in the process of transitioning my VueJS project from VueCLI 2 to version 3. After moving all the necessary files to the src folder, I attempted to view it in the browser by running npm run serve. However, I encountered a problem where the ...

javascripthtmlvue.jsvue-cli

Different ways of manipulating images with JavaScript

I attempted to tackle the issue independently, but I'm stumped. Is there a way to adjust the width of an image in JS when the screen dimensions are changed? ...

javascripthtmlimagewidthscreen

Generate a sequence of years without relying on the range function

Is there a different approach to generating this array without relying on the range function? Below is an illustration of what I want, but without utilizing the range method. const years = myCustomArrayGeneration(1990, getYear(new Date()) + 1, 1); ...

javascriptarraysreactjs

What is the best way to connect my 'Projects' folder to app.js within a React application?

import "bootstrap/dist/css/bootstrap.min.css"; import Navbar from './components/Navbar'; import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import Home from './components/Home'; import Project ...

javascriptcssreactjs

Creating a custom Angular filter to group every 3 items within an iteration into a new div container

When attempting to organize three instances of app-story-preview within a wrapper div using a ngFor loop, I encountered the following code: <ng-template [ngIf]="stories.length > 0" [ngIfElse]="empty"> <cdk-virtual-scroll-viewport [itemSize ...

javascriptangulartypescriptmodulo

Creating a basic bootstrap modal dialog in ASP.NET MVC: A step-by-step guide

After navigating from the login page, the user clicks on the "ForgotPassword" link and is directed to a separate page where they can fill out a form to request a new password. http://localhost:2350/Account/ForgotPassword Once the user clicks on the "Save ...

javascriptjqueryajaxasp.net-mvctwitter-bootstrap

What is the best way to adjust a 1px margin in Google Chrome?

Check out this example http://jsbin.com/oqisuv/ CSS body { background:#e7ebf2 url(http://i.imgur.com/R2VB6.png) center repeat-y; } .menu { width:989px; margin:auto; height:100px; background:#666666; line-height:100px; text-ali ...

htmlcssgoogle-chrome

Node.JS has deceived us with its false promises of `import` support

Could it be that I am making a mistake? I have been eagerly awaiting the experimental ES6 module loader in Node.JS since version 10. This feature is crucial for me to seamlessly use the same code in both the browser and node environments. This is how I w ...

javascriptnode.jsecmascript-6javascript-import

Is concealing content using Javascript or jQuery worth exploring?

While I have been hiding content using display:none; in css, there are concerns that Google may not like this approach. However, due to the needs of jQuery animations, it has been necessary for me. Recently, I have come across a new method for hiding conte ...

javascriptjqueryhtmlcss

Is Nextjs prone to creating identical pages during the build process?

I have a question that I couldn't find the answer to anywhere, so I hope someone here can help me. I have a blog and I want to use SSG for the homepage and ISR for individual posts. If I set up my homepage using SSG to display 10 posts like this: ind ...

javascriptreactjsnext.js

The values of nested objects are not being passed as parameters from the AJAX call to the action method

How can I ensure that the nested object values in the parameter are passed correctly to the action method in the controller along with the full object? When calling the AJAX method, the values in the object inside the red ring on the pictures do not get p ...

javascriptc#ajaxasp.net-mvcsignalr

Tips for making sure custom fonts are loaded before running any JavaScript code

Upon loading my page, I run a JavaScript function to determine if specific text fits within its parent div. If it doesn't fit, then adjustments must be made. The text is styled with a custom font, which can be loaded either through @font-face or Goog ...

javascriptcssfonts

Tips for formatting JSON using jQuery

Imagine my JSON data with 3 different sets of information: [ { "Pair":"", "Id":"8ca2df56-2523-4bc3-a648-61ec4debcaaf", "PubDate":"/Date(1463775846000)/", "Provider":null, "Market":"" }, { "Pair":"", ...

javascriptjqueryhtmlcssjson