Is there a way to reposition a flexboxed sidemenu from the bottom of the screen to the top for mobile devices?

Question

Is there a way to reposition a flexboxed sidemenu from the bottom of the screen to the top for mobile devices?

I'm having trouble rearranging the layout of my webpage. Currently, my sidebar element appears below the main content on mobile devices, but I would like it to show above the main content instead. I have utilized flexbox for most of my design, separating the main content into one box and the sidebar into another. On large screens, the sidebar correctly sits on the right side. Is there a way to achieve the desired layout change on mobile devices while keeping the desktop version intact? Any assistance in resolving this issue would be greatly appreciated.

To provide a better understanding of the situation, I have uploaded the code for the wrapper, main content, and sidebar on CodePen: https://codepen.io/Pinchofginger/pen/WddJQW?editors=1100

For reference, you can also view an image of the current layout here: https://i.sstatic.net/RUvtQ.jpg

Below is a snippet of my HTML and CSS code:

HTML


Insert your HTML code here.

CSS


Insert your CSS code here.

html css mobile flexbox sidebar

Answer 1

Answer №1

To achieve the desired layout, utilizing flex order and media queries is the way to go. You can view the implementation on CodePen.

Here's the HTML structure:

<body>
  <main></main>
  <aside></aside>
</body>

And here are the corresponding CSS styles:

body {
  display: flex;
  height: 100vh;
}

main {
  background: red;
  width: 90%;
}

aside {
  background: blue;
  width: 10%;
}

@media all and (max-width: 760px) {

  body {
    flex-wrap: wrap;
  }

  aside, main {
    width: 100%;
  }

  aside {
    order: -1;
  }
}

Answer 2

To achieve the desired layout, utilizing flex order and media queries is the way to go. You can view the implementation on CodePen.

Here's the HTML structure:

<body>
  <main></main>
  <aside></aside>
</body>

And here are the corresponding CSS styles:

body {
  display: flex;
  height: 100vh;
}

main {
  background: red;
  width: 90%;
}

aside {
  background: blue;
  width: 10%;
}

@media all and (max-width: 760px) {

  body {
    flex-wrap: wrap;
  }

  aside, main {
    width: 100%;
  }

  aside {
    order: -1;
  }
}

Is there a way to reposition a flexboxed sidemenu from the bottom of the screen to the top for mobile devices?

Answer №1

Similar questions

How to assign multiple selection values in Bootstrap's select picker

CSS - With the abundance of positioning methods available, determining the right approach can be quite a puzzle

Deactivate rounding numbers in jQuery AJAX

Assigning the href attribute dynamically

What is the best way to send a string literal as a parameter to a method triggered by a click event

Tips on positioning flex items to create a visually appealing bar chart design

The Textfield component in Material UI now automatically sets the default date to the current date when using the "date" type

Personalize your Slick.js

How to Extract Information from a Table Enclosed in a Div Using HTML Parsing?

Entire body encompassing table

Invoke a function in Angular when the value of a textarea is altered using JavaScript

An issue has been encountered within the node modules directory at the path node_modules/@angular/flex-layout/extended/typings

Trouble aligning CSS UL/LI menu in the center

Issue with scrolling feature in div

What's the best way to prevent extra spacing when typing in a materialUI TextField?

Error - IO Is Not Defined in Socket.io

Showing headings in the table vertically

Angular Collapsible Panel showcasing brief summary

Ways to toggle the visibility of an image using jQuery Mobile

Is it not possible to change node labels in D3.js after clicking on a node?