Mobile Website Blog Page With Dual Sidebars Issue

I have created a blog page using bootstrap 4 that features both left and right sidebars along with the main content section.

Everything looks great on Desktop view.

However, when viewed on a mobile phone, the order changes to: 

left-sidebar>content>right-sidebar
.

My desired layout for mobile phones is: 

content>left-sidebar>right-sidebar

https://i.sstatic.net/sXxpU.png

https://i.sstatic.net/s9ZZU.png

To better illustrate this issue, I have prepared a demonstration below:

body {
padding: 40px;
}
.left-sidebar, .content, .right-sidebar {
min-height: 300px; margin-bottom: 40px;border: 1px solid #aaa;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet"/>

<main>
<div class="container text-center">
<div class="row">
<div class="col-md-2">
<div class="left-sidebar p-4">Left Sidebar</div>
</div>
<div class="col-md-7">
<div class="content p-4">Content</div>
</div>
<div class="col-md-3">
<div class="right-sidebar p-4">Right Sidebar</div>
</div>
</div>
</div>
</main>

htmlcssbootstrap-4

Answer №1

You have the option to utilize the CSS order attribute specifically at the mobile breakpoint.

body {
  padding: 40px;
}

.left-sidebar,
.content,
.right-sidebar {
  min-height: 300px;
  margin-bottom: 40px;
  border: 1px solid #aaa;
}

@media only screen and (max-width: 800px) {
  .col-md-2 {
    order: 2;
  }
  .col-md-7 {
    order: 1;
  }
  .col-md-3 {
    order: 3;
  }
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet" />

<main>
  <div class="container text-center">
    <div class="row">
      <div class="col-md-2">
        <div class="left-sidebar p-4">Left Sidebar</div>
      </div>
      <div class="col-md-7">
        <div class="content p-4">Content</div>
      </div>
      <div class="col-md-3">
        <div class="right-sidebar p-4">Right Sidebar</div>
      </div>
    </div>
  </div>
</main>

Answer №2

To achieve a responsive design, consider utilizing media queries or the Grid Layout in CSS.

CSS Grid Layout Module provides a structured layout system with rows and columns, simplifying web page design by eliminating the need for floats and positioning.

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

What are the reasons behind the ineffectiveness of !important in CSS?

I am looking to increase the font-size of all text on my website to 200%, you can find some test code in this Fiddle link. If it is a PX issue, why does the code work when I add the style to "<h2>"? <div> <h2 class="test" style="font-size: ...

htmlcss

Tips for utilizing browser cache in AJAX requests to prevent loading the refreshed JSON file

It may seem like a strange question, but I'm experiencing an issue with an AJAX call to a JSON file. Both the request and response headers do not indicate to not use cache, and in the browser settings, the Disable cache option is not checked. What mor ...

javascriptjqueryhtmlcssajax

Activate divs with Bootstrap5 modal toggle functionality

What adjustments must be made to the Bootstrap 5 example below in order to achieve the following two objectives: The "afterAcceptingTerms" division should remain hidden until the user clicks on the Accept Terms modal button, ensuring that only the "before ...

javascripthtmlcsstwitter-bootstrapbootstrap-5

What is the best method for incorporating an Angular Component within a CSS grid layout?

I recently started learning Angular and am currently working on a project that requires the use of a CSS grid layout. However, I'm facing an issue with inserting a component inside a grid area specified by grid-area. My attempt to achieve this in app ...

cssangulartypescriptcss-grid

Pondering the importance of the "zoom" feature in creating responsive designs

Currently, I am working on creating a responsive design using HTML and CSS. However, I have encountered an issue that I need help with: When resizing the window, the layout adapts perfectly. Similarly, when zooming in or out without resizing the window, e ...

csslayoutresponsive-designzooming

Is there a way to make a glossy `selectInput()` extend beyond a `bslib::navset_card_pill()`?

The dilemma: My issue is that the selectInput() in my code gets cut off by the lower border of the card: library(shiny) # Version 1.7.4 library(bslib) # Version 0.5.0 ui <- page_fluid( navset_card_pill(nav_panel( title = "No overflow :(&quo ...

htmlcssrshinybslib

What is the quickest way to redirect a URL in WordPress?

Is it possible to redirect a URL instantly in WordPress using this script code? JavaScript Code: jQuery(document).ready(function() { var x = window.location.href; if (x == 'http://example.com/') { window.location.hr ...

javascriptphphtmlwordpress

Click here to open in a new tab and experience the ever-changing dynamic

Imagine a scenario where a property site displays the main viewed property ad at the top, with smaller ads in square divs below. When a user clicks on one of the smaller ads, it dynamically swaps places with the main ad thanks to JavaScript. All ad data is ...

javascriptjqueryhtmlajax

To optimize your bundling process, include the leaflet.css file from the node_modules/leaflet directory using webpack

Currently, I am working on developing a map application using webpack and leaflet. While I can successfully require leaflet.js from my map.js file, I encounter an error when trying to call leaflet.css. The configuration in my webpack.config.js is as follo ...

cssnode.jsnpmleafletwebpack

Unable to shift the header menus upwards for proper alignment with the logo

Header with logo I'm trying to align the menu items like Home, etc with the logo, but it seems like the logo is taking up too much space above the menu headers and I'm not sure how to reduce it. I've already attempted using margin-left or r ...

htmlcss

Changing the CSS background in React when updates occur

Currently working on toggling the CSS background image within this React application. The images have been successfully imported and a variable called "image" is set to the imported image as the iteration increases/decreases with each click. The issue I&a ...

cssreactjs

Angular application experiencing issues with fixed headers not scrolling correctly

I've been working on implementing a fixed header for one of my pages in an Angular application, but I'm having some trouble getting it to work as expected. Currently, when the user expands the accordions on the page and scrolls down, the headers ...

htmlangular

Assign a distinct color to each character of the Russian alphabet within a specified text using CSS and/or JavaScript

My experiment involves testing the concept of "induced synesthesia" by assigning different colors to individual characters in text. I plan to map each character in the Russian alphabet to a specific color, for example, A is red, B is blue, and so on, resul ...

javascripthtmlcss

Stacking pictures with CSS and absolute placement

I have designed a webpage where I need to layer three images in a specific order to create a background for content placement without any movement during scrolling. Fixed positioning is not suitable for this purpose. Below is the sequence in which the imag ...

htmlcsscss-position

Ways to incorporate ejs partials using JavaScript

I am currently developing code to determine if a user is logged in. Depending on the user's login status, the content of the "my user" section should vary. When a logged-in user navigates to the "my user" page, an if statement is executed to confirm ...

javascripthtmlnode.jsexpressejs

Is there a way to automatically extend my content to fill the space on the page below the Material UI AppBar?

I am currently using React and Material UI React to develop my application. My goal is to implement the AppBar component with content underneath, without causing the entire page to scroll. I want the content to occupy the maximum remaining height and the f ...

cssreactjstypescriptmaterial-ui

Guide on adding CSS3 ribbons to elements on both sides

I recently came across a tutorial that teaches how to create a CSS ribbon. However, after following the tutorial, I found that the ribbon only appears on one side of the element. This has left me wondering if it's possible to have the ribbon display o ...

css

Center-aligned video text overlay that adapts to different screen sizes for a responsive design

I am looking to showcase a full-width video with overlay text that is perfectly centered both vertically and horizontally on the video. The centering should adapt to changes in viewport width so that it remains centered at all times. Additionally, I would ...

htmlcssvideooverlay

div or paragraph element nested within a flex container

How can I make the logo text div tag, called Title, take up its content space inside the parent flexbox without wrapping? I prefer not to set the Title div to 100% or use white-space: nowrap. I simply want it to behave like a regular div where it fills it ...

javascripthtmlcssflexbox

When closing a Bootstrap modal, the modal overlay does not automatically close along with it

Need assistance with a functionality where new requests can be added and existing requests can be edited using a single component that regenerates with the correct data when needed. Below is the code for the base component: home-component.html <ul c ...

angularbootstrap-4bootstrap-modal