What is the best way to rearrange a sidebar column to be positioned between central content columns on a mobile

I am looking to design a layout with the following components:

  • Left Sidebar
  • Main Content
  • Right Sidebar
  • Extra Content

My goal is to achieve the following:

  • On larger screens: Ensure that the "Extra Content" aligns directly below the main content with the same width and no gap between them.
  • On smaller screens: Stack all elements vertically with full width, placing the Right Sidebar between the Main Content and Extra Content.

This is my current approach:

.row {
  background: #dfdfdf;
}

.col {
  background: #f8f9fa;
  border: solid 1px #6c757d;
  padding: 10px;
}

.tall {
  height: 100px;
}

.xtall {
  height: 200px;
}

.container.my-size .row {
  margin-top: 30px;
}

.container.my-size .row .col {
  background: #cdceff;
}

#sidebar-right {
  float: right;
}

#main {
  background: #ffeecd;
}

#extra {
  background: #ffeecd;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ [email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<div class="container my-grids">
  <div class="row flex-column flex-sm-row">
    <div id="sidebar-left" class="col col-sm-3 order-sm-1 align-self-baseline">
      <div class="tall">Left Sidebar</div>
    </div>
    <div id="main" class="col col-sm-6 order-sm-2 align-self-baseline">
      <div class="">Main Content</div>
    </div>
    <div id="sidebar-right" class="col col-sm-3 order-sm-3 align-self-baseline">
      <div class="tall">Right Sidebar</div>
    </div>
    <div id="extra" class="col col-sm-6 order-sm-4 align-self-baseline">
      <div class="">Extra Content</div>
    </div>

  </div>
</div>

<!-- Displaying screen size -->
<div class="container my-size">
  <div class="row">
    <div class="col col-md-12 d-xs-block d-sm-none">Screen is <b>xs</b></div>
    <div class="col col-md-12 d-none d-sm-block d-md-none">Screen is <b>sm</b></div>
    <div class="col col-md-12 d-none d-md-block d-lg-none">Screen is <b>md</b></div>
    <div class="col col-md-12 d-none d-lg-block d-xl-none">Screen is <b>lg</b></div>
    <div class="col col-md-12 d-none d-xl-block d-xxl-none">Screen is <b>xl</b></div>
    <div class="col col-md-12 d-none d-xxl-block">Screen is <b>xxl</b></div>
  </div>
</div>

View Example Fiddle of my progress so far

Current Layout behavior:

Image illustrating the behavior of taller sidebars compared to main content

Image showing behavior when main content is taller than sidebars

Image displaying small screen behavior (desired result)

Desired Layout outcome:

Image depicting desired layout on larger screens

Image representing desired layout on larger screens

Image showcasing desired layout on small screens

Currently using Bootstrap 3, but open to solutions in Bootstrap 4/5 if necessary.

cssbootstrap-5grid-layout

Answer №1

If you want to ensure everything works smoothly, consider duplicating the content within #extra in another element and toggling between them based on the screen size.

<div class="container my-grids">
  <div class="row">
    <div id="sidebar-left" class="col-sm-3 align-self-baseline">
      <div class="tall">Left Sidebar</div>
    </div>
    <div class="col-sm-6 align-self-baseline py-0">
      <div class="row">
        <div id="main" class="col-12 align-self-baseline">
          <div class="">Main Content</div>
        </div>
        <div id="extra" class="col-12 d-none d-sm-block">
          <div class="">Extra Content</div>
        </div>
      </div>
    </div>
    <div id="sidebar-right" class="col-sm-3 align-self-baseline">
      <div class="tall">Right Sidebar</div>
    </div>
    <div id="extra-extra" class="col-12 d-block d-sm-none">
      <!-- repeat extra content here or use js to copy -->
    </div>
  </div>
</div>

You can easily achieve this with a simple jQuery function to duplicate the content:
(Just make sure not to have an id within #extra as it could result in an invalid duplicate)

$(document).ready(() => {
  $('#extra-extra').html($('#extra').html())
})

https://jsfiddle.net/chan_omega/rkqz81bc/

https://getbootstrap.com/docs/3.4/css/#grid-example-basic https://getbootstrap.com/docs/3.4/css/#grid-nesting

Answer №2

Successfully found a solution to achieve the desired outcome.

Modifications implemented include:

  • Created a new "inner container" to house Main Content, Extra Content, and Right Sidebar
  • Configured the inner container to occupy the remaining columns, excluding the First Column, on larger screens and expand to full width on smaller screens
  • Utilized floats and column styling for the elements within the inner container while disabling flex box options

Explore the solution further

.row { 
  background: #dfdfdf;
}

.col {
  background: #f8f9fa;
  border: solid 1px #6c757d;
  padding: 10px;
}

.tall {
  height: 100px;
}

.xtall {
  height: 200px;
}

.container.my-size .row {
  margin-top: 30px;
}

.container.my-size .row .col {
  background: #cdceff;
}

#sidebar-right {
  float: right;
}

#main {
  background: #ffeecd;
  float: left;
}

#extra {
  background: #ffeecd;
  float: left;
}

#inner-container {
  padding: 0;
}

#inner-container .col {
  flex: none;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet" />

<div class="container my-grids">
  <div class="row flex-column flex-sm-row">
    <div id="sidebar-left" class="col col-sm-3 align-self-baseline">
      <div class="tall">Left Sidebar</div>
    </div>
    <div id="inner-container" class="col col-sm-9">
      <div id="main" class="col col-sm-8">
        <div class="xtall">Main Content</div>
      </div>
      <div id="sidebar-right" class="col col-sm-4">
        <div class="tall">Right Sidebar</div>
      </div>
      <div id="extra" class="col col-sm-8">
        <div class="">Extra Content</div>
      </div>
    </div>
  </div>
</div>

<!-- Display the current screen size in a row -->
<div class="container my-size">
  <div class="row">
    <div class="col col-md-12 d-xs-block d-sm-none">Screen is <b>xs</b></div>
    <div class="col col-md-12 d-none d-sm-block d-md-none">Screen is <b>sm</b></div>
    <div class="col col-md-12 d-none d-md-block d-lg-none">Screen is <b>md</b></div>
    <div class="col col-md-12 d-none d-lg-block d-xl-none">Screen is <b>lg</b></div>
    <div class="col col-md-12 d-none d-xl-block d-xxl-none">Screen is <b>xl</b></div>
    <div class="col col-md-12 d-none d-xxl-block">Screen is <b>xxl</b></div>
  </div>
</div>

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

Utilize grids to ensure consistency in the width of every <li> element across the browser

Is there a way to make the ul element span the entire width of the webpage regardless of window size? http://jsfiddle.net/32hp1w5p/ ul { grid-column: 1/13; list-style-type: none; display: table; margin: 0 auto; } li { float: left; border: ...

htmlcss

How can I customize the dropdown list arrow to match my own design?

Is there a simple way to substitute the standard arrow in the dropdown menu with a custom arrow image? ...

htmlcssdrop-down-menustyling

Can you explain how this particular web service uses JSON to display slide images?

{ "gallery_images": [ {"img":"http://www.jcwholesale.co.uk/slider_img/big/1_1433518577.jpg"}, {"img":"http://www.jcwholesale.co.uk/slider_img/big/1_1433519494.jpg"}, {"img":"http://www.jcwholesale.co.uk/slider_img ...

javascriptjqueryhtmlcssjson

Tips for styling the four DIV elements on a website's homepage with CSS

In my current project, I am working on a webpage that requires specific layout elements. On the web homepage, I need to split it into four sections positioned between the header and footer. The main code snippet for the homepage structure is as follows: ...

htmlcss

Show an SVG overlay when hovering over an image

Is there a way to create a hexagon shape around an image when it is hovered over using CSS only, even if the image itself has a circular border-radius of 50%? ...

javascriptcss

MVC Template with a Defective BootStrap

Struggling with creating an MVC master template along with sub-pages using Bootstrap. Sadly, I seem to have messed it up and can't quite figure out where the problem lies. You can check out my test website at Do you see how the different sections a ...

cssasp.net-mvc-4twitter-bootstrap

apply CSS to highlight a clicked div as if it were a radio button

Is it possible to use CSS to highlight a div when clicked (when the div is acting as a label for a radio button)? Here is my code: <?php foreach ($images as $image) { ?> <input type="radio" name="id" value="<?php echo $image['id& ...

phpjqueryhtmlcss

Scrolling presentation with dynamic animations

Does anyone have any suggestions for creating a scrolling effect similar to the one on this website? I want to implement a scroll effect where each presentation page is revealed one by one when the user scrolls using their mouse wheel, encouraging them to ...

javascriptcssanimationeffectspresentation

Limits of the window in a d3 network diagram

I'm currently working with a network diagram that consists of circle elements and lines connecting them. However, I've run into an issue where sometimes there are so many circles that they extend beyond the edge of my screen (see image attached). ...

javascriptjquerycssd3.jsdiagram

Modifying element size using jQuery causes issues with maintaining a 100% height

I am facing an issue with a sidebar that is styled using the following css properties: background:#164272; position:absolute; left:0px; top:70px; width:250px; height:100%; When I use jQuery to display a table that is initially hidden and on ...

javascriptjqueryhtmlcss

What is causing the parse error in my CSS code?

Running into a parse error on line 314 of my css (style.css). The error is "} expected css(css-rcurlyexpected)". Even after adding the necessary curly brace, it still doesn't validate. Below is my CSS starting from line 314 till the end: /* CSS code ...

css

Enhance iframe with hover effect

I'm currently working on a unique WordPress blog design where images and iframes (YouTube) transition from monotone to color upon hover. So far, I've successfully implemented the grayscale effect for images: img { -webkit-filter: grayscale(100% ...

wordpresscssiframe

Navigating Bootstrap 5 & Sass in Visual Studio 2019: A Comprehensive Guide

I recently added Install-Package bootstrap.sass to my ASP .net core 3.1 project. After installation, I noticed that it included both the bootstrap.js and scss folder. However, I'm unsure of how to compile the bootrap.scss file and implement it in the ...

visual-studiotwitter-bootstrapsassnuget-packagebootstrap-5

Deactivate a chosen item following selection

Is there a way to deactivate a selectable element after it has been clicked in the scenario below? Additionally, I would like to modify its CSS style. $(function(){ $("#selectable").selectable({ stop: function() { var result = $( "#select-re ...

javascriptjquerycssjquery-uijquery-ui-selectable

When pressing the next or previous button on the slider, an error message pops up saying "$curr[action] is not a

I found this interesting Js fiddle that I am currently following: http://jsfiddle.net/ryt3nu1v/10/ This is my current result: https://i.sstatic.net/VygSy.png My project involves creating a slider to display different ages from an array, such as 15, 25, ...

javascripthtmljquerycssbootstrap-4

What are alternative methods for creating a two-column form layout that do not involve the use of

When generating the html form, I am looping through the form variables as shown below: {% for field in form %} {{ LABEL }}{{ INPUT FIELD }} The labels and fields are going through a loop. A simple one-column layout can be generated using: {% for field ...

javascripthtmlcssformswebforms

Could you please guide me on resolving the Blazor/Bootstrap 5 CSS problem related to styling "striped" tables?

Looking for a solution to fix a CSS issue involving Bootstrap 5 "table-striped" and displaying Blazor Razor components. In my Blazor/Bootstrap 5 page, I have a table displaying content fetched from a service at runtime. Initially, the Bootstrap CSS is vis ...

c#css.netblazorbootstrap-5

an online platform design

I am currently working on building a webpage, but I am facing some issues with the layout. Specifically, I am unable to make the div automatically adjust its size (particularly the height). Here is the code that demonstrates the problem: <!DOCTYPE html ...

htmlcss

Creating a custom HTML layout: A step-by-step guide

Struggling to create a unique layout in HTML and seeking assistance. Instead of words, I'll show you my current layout with images: While this works fine for now, if div1 becomes taller, the layout will look like this: My ultimate goal is to achiev ...

csslayouthtml

Click to enlarge the text on button press

Recently, I've been working on a project involving a table that has a button at the end. My goal is to double the text size of the rows in the table when the button is clicked. As someone who is new to JQuery, this question may sound basic but any hel ...

jquerycss