Tips for getting the sidebar to move down on mobile devices

When viewing my website on a mobile device, the sidebar appears above my products. I would like it to be positioned below my products. The sidebar is currently on the left side with content on the right. Is there a more effective way to create a sidebar than what I have done here? Link to code snippet

<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <title>Hello, world!</title>
  </head>
  <body>   
<div class="row">
<div class="col-md-2">
Home/Categories
</div>
<div class="col-md-10">
<h2>My shop</h2>
<div class="row">
<div class="col-md-3">
sdsd
</div>
<div class="col-md-3">
sdsd
</div>
<div class="col-sm-3">
sdsd
</div>
<div class="col-sm-3">
sdsd
</div>
</div>
</div>
</div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
csstwitter-bootstrapbootstrap-4

Answer №1

If you want to achieve this easily, consider using Flexbox. Here is a Codepen example I made for you: https://codepen.io/CWSites/pen/pqGowo

You can structure the code however you prefer, but for demonstration purposes, I simply created a few divs.

<div class="container">
  <div class="sidebar">
    Sidebar Here
  </div>
  <div class="content">
    Hello World
  </div>
</div>

The key lies in the CSS styling. You'll need a container div with specific flex styles applied to enable Flexbox. Additionally, your sidebar and content divs will require their own flexbox properties. In my example, I included a media query for screens under 600px, but you can customize this as needed.

Initially, set the order of your sidebar to 1 so it appears first from left to right. However, on smaller screens, I adjust the flexbox order to make the sidebar 2 and the content 1.

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.sidebar {
  width: 30%;
  order: 1;
}

.content {
  width: 70%;
  order: 2;
}

@media only screen and (max-width: 600px) {     
  .container {
    flex-direction: column;
  }

  .sidebar {
    order: 2;
  }

  .content {
    order: 1;
  }
}

When working with Flexbox, I highly recommend utilizing this informative guide.

Answer №2

To achieve proper ordering, you must utilize the order class utility:

Documentation: https://getbootstrap.com/docs/4.2/layout/grid/#reordering

Try it out on JsFiddle: https://jsfiddle.net/b9ejhstw/1/

HTML Example:

<div class="row">
    <div class="col-xs-12 col-md-10 order-md-last">   <!-- <--- Define Order Here  --->
<h2>My shop</h2>
<div class="row">
<div class="col-md-3">
    sdsd
</div>
<div class="col-md-3">
    sdsd
</div>
<div class="col-sm-3">
    sdsd
</div>
<div class="col-sm-3">
    sdsd
</div>
</div>
    </div>
    <div class="col-xs-12 col-md-2">
        Home/Categories
    </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

Issue with Hiding Bootstrap Tabbed Content Correctly

I am currently struggling to make a Bootstrap tab field function correctly, encountering some obstacles along the way. While the content is successfully tabbing between each div, the issue I'm facing is that the content from each tab is actually bein ...

jquerycsstwitter-bootstrap

The unique identifier for a specific child element in Firefox

While working on this website: I customized the right sidebar navigation using: .sidenav a:after { display: block; position: relative; z-index: 0; top: -3.6em; left: 0.15em; width: 90%; content: "."; font-family: 'R ...

cssfirefoxcss-selectors

The erratic appearance of inactive elements within ExtJS components

I am currently working on an ExtJS form that utilizes hbox-layout containers to generate sentences containing various form inputs. There is a specific requirement to disable the form under certain conditions. These hbox-layout containers consist of compone ...

cssextjs

Are there any CSS attribute configurations that I am overlooking?

Reviewing a colleague's CSS file, I stumbled upon an interesting section. They are a skilled CSS designer, so before jumping to conclusions, I wanted to make sure I am not missing something. In the code snippet below, it seems like they are unintenti ...

css

Achieving functionality with dropdown menus in jQuery

I am facing an issue with a dropdown menu that works perfectly in jsFiddle during testing, but does not function as expected when I run it on my testing server. jsFiddle: http://jsfiddle.net/cyberjo50/39bu8/2/ HTML <!doctype html> <html> < ...

javascriptjqueryhtmlcss

What is the best way to adjust the size of an image as I navigate down a webpage?

I've been working on designing a navigation bar for a website, but I'm running into some issues. My goal is to have the logo shrink as the user scrolls down the site. I've experimented with webkit animations and various javascript/jQuery fun ...

javascriptjqueryhtmlcssnavbar

Enhance web design with dynamic size pseudo elements using only CSS, no

Before the title, I've added a pseudo element with a slanted background. When the title is wrapped, it increases in height. I've been attempting to make the pseudo element adjust to the title's height, but haven't succeeded yet. I&apos ...

htmlcsspseudo-element

Animating a div in CSS3 to expand horizontally from left to right without affecting its original position

I am currently in the process of developing a calendar using HTML, CSS, and JavaScript. The main purpose of this calendar is to showcase upcoming and past events. However, I am facing difficulties in ensuring that my event blocks occupy the remaining space ...

javascripthtmlcss

Create a website that can expand in size without relying on percentage values

At the moment, I am in the process of building a responsive website. The issue I am currently facing is that the layout for the responsive design (which was created by someone else and not me) has a fixed width of 745px. Obviously, this width does not acco ...

htmlcssresponsive-designtablet

What is the best way to ensure that these social icons are perfectly centered on the page across all web browsers?

Visit my website here: foxweb.marist.edu/users/kf79g/contact.php I'm stuck on the final step needed to deploy my website and finish it. The issue I'm facing is with the social icons when viewed on medium and small screens. I want them to be cent ...

htmlcssinternet-explorerresponsive-design

Submitting a form within AJAX-powered tabs (using the Twitter Bootstrap framework)

I have encountered an issue while trying to submit a form that is located within tabs. The content of these tabs is generated through AJAX. My problem arises when I submit the form - the page refreshes and loads the "default" tab, causing the PHP function ...

javascriptphpjqueryajaxtwitter-bootstrap

Browser Fails to Recognize AJAX Links as Visited

It appears that the styles for a:visited do not apply to links that are loaded via JavaScript. When a user clicks on a standard link, it shows as visited right away and even after refreshing the page. I'm uncertain if this issue is specific to jQuery ...

jquerycssajaxjquery-mobilebrowser-history

Issues arise when using the "placeholder" attribute within a <p:inputText tag while the inputText is devoid of any value

A current project involves implementing JSF Mojarra 2.3.9.SP02 alongside PrimeFaces 7.0 on Wildfly 17 using the Sapphire template provided by PrimeFaces. However, I've encountered a significant issue with a specific <p:inputText element within my f ...

htmlcssjsfprimefaces

What is the best way to position a container div over another container using Bootstrap or CSS?

https://i.sstatic.net/q1qGi.png I'm working on a Bootstrap 4 layout where container B needs to overlay part of container A. I want to achieve a design where container B appears on top of container A. Any suggestions or references on how to achieve th ...

javascripthtmlcssbootstrap-4

Utilizing Jquery to enhance slide image transitions with navigational links

As a newcomer to jQuery, I am attempting to create a slider using jQuery. Here is the script I have so far: $(function() { var bgCounter = 0, text = [ 'some html code here', 'some html code here', 'some ...

javascriptjqueryhtmlcssslide

Customize the font size in Bootstrap 5 using REM units

When it comes to setting font sizes for easier calculations in REM values, I currently use this approach: html { font-size: 62.5%; } body { font-size: 1.6rem; } /* 16px */ However, Bootstrap 5 uses the root value (which is typically set at 62.5%) to calc ...

csssassbootstrap-5

Stop the sudden jump when following a hashed link using jQuery

Below is the code snippet I am working with: $( document ).ready(function() { $( '.prevent-default' ).click(function( event ) { event.preventDefault(); }); }); To prevent the window from jumping when a hashed anchor ...

javascriptjqueryhtmlcss

Customize the appearance of an ASP link button within a navigation menu

Just getting started with ASP.net and CSS, I want to customize my link button using CSS similar to other <a href> buttons, but I seem to be running into some issues. This is the code for my menu: <div id="templatemo_menu"> <ul ...

htmlasp.netcss

Is it possible to use only CSS to crop an image into a square and then shape it into

I am attempting to create a circular shape out of images that have varying sizes and shapes (some rectangular, some square, some portrait, and some landscape). When I apply either clip-path: circle(50% at 50% 50%); or border-radius: 50%;, the image transf ...

htmlcssimage

What is the reason border property does not transition effectively?

I am trying to remove the border property after a certain period of time (1 second) and make it smooth. Here is what I have attempted: var elem = $('div').css({'border-top':'6px solid #FC9A24', 'border-le ...

javascriptjqueryhtmlcss