Arranging div elements in a responsive manner

I am currently developing a responsive website that will have different layouts depending on the screen size. On desktop/large screens, it will be structured as follows:

  1. Header
  2. Menu
  3. Content

However, on smaller screens like phones, the layout should change to:

  1. Header
  2. Content
  3. Menu

I have seen examples using absolute positioning for this kind of setup, but I want the layout to adapt dynamically based on screen size without fixed positions. Can anyone suggest a solution for achieving this?

Thank you!

htmlcss

Answer №1

To achieve a reverse direction layout using CSS3 flexbox, you can utilize the box-direction: reverse; property. Here's an example:

.flex{
    display: -moz-box;
    -moz-box-orient: vertical;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    box-orient: vertical;
    display: box;
    width: 100%;
}
.flex div, .header{
    border: 1px solid red;
    height: 100px;    
}

@media screen and (max-width : 400px){
    .flex{
        -moz-box-direction: reverse;
        -webkit-box-direction: reverse;
        box-direction: reverse;
    }
}

For further reference, you can view this JSFiddle link.

Answer №2

HTML elements cannot be reordered by CSS alone, leading to the use of absolute positioning in this particular scenario.

Alternatively, a solution could involve creating a hidden duplicate section that is visible in one layout but not in another, and vice versa.

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

Enhancing the appearance of your CoreUI template: A step-by-step guide

Currently, I am using the CoreUi template in my Laravel project. Since I am not very familiar with it, I have heard that it is not recommended to override their classes if I intend to make changes to the styling of the template or enhance it. Attached bel ...

htmlcsscore-ui

Alter the color of the initially chosen option in the dropdown selection

I'm struggling to modify the color of the initial selection while keeping the remaining selection-options at their default black color. Unfortunately, I haven't been successful in achieving this. Currently, all colors are #ccc. What I want is fo ...

javascriptjqueryhtmlcss

Chrome shows different height for various input types such as time and number

Having some trouble with input elements of different types and varying heights. For example, in Chrome the input type "time" appears taller than type "number." See the simplified illustration here: http://jsfiddle.net/4jteqy1f/ HTML <article class="se ...

csshtmlgoogle-chrome

Flame-inspired CSS editor

My current CSS editing workflow goes something like this: I ask for feedback on a page Suggestions are given to make post titles bigger I use Firebug to inspect the post title element I locate the corresponding CSS statement in Firebug (like h2.post_title ...

csseditorfirebug

Verify password criteria instantly

In my user registration form, users are required to enter a password that meets certain criteria such as containing 8 characters, numbers, and upper case letters. How can I indicate to the user if their password meets these criteria while they are typing? ...

javascriptjqueryhtml

Deactivate the next button on the paginator within the PrimeNG p-table

In the p-table paginator, I want to disable the next button when a specific boolean is set to false. Below is my p-table setup: <p-table #dt id="{{id}}_table" [(value)]="_datasrc" [columns]="cols" [rows]="rowNumber || ...

cssangulardatatablepaginationprimeng

What is the best way to align the logo image to the left side of the Material UI app bar without any gaps?

Currently, I am working on a material UI app bar to serve as my navigation bar. The issue I am encountering involves the logo image on the left side of the page having excessive spacing from the edge, as shown in the image below. I've tried adjusting ...

cssreactjsmaterial-ui

When you hover over one div, the opacity of another div shifts

Need some help with CSS on my WordPress site. I want to change the opacity of a div column when hovering over another one. Specifically, I would like the cat box to become semi-transparent when hovering over the dog box. Here is the CSS code I am using: . ...

csshovertransparency

What is the process for embedding images in Angular that are stored in a directory other than assets?

I am working on an Angular Application with a particular structure outlined below: Structure Within the structure, there is a directory labeled backend (highlighted in yellow) containing other directories. An example of a valid path within this structure ...

htmlangularimagesrc

Utilizing JavaScript to trigger a series of click events on a single button in order to

I am working on implementing a click event for a checkbox that will add and remove CSS classes using the "classList.toggle" method. Specifically, I want the checkbox to toggle between adding the "xyz" class on the first click, and then adding the "abc" cla ...

javascripthtmlcss

I am looking to insert a link into each column, but unfortunately, the styling is becoming disrupted whenever I attempt to do so due to the constraints

Is there a way to add links to each column without disrupting the current styling? Apologies for the messy code, I am still new to this field. <div class="row justify-content-end"> <a href="#"><div class=&qu ...

htmlcssgridbootstrap-5styling

Repositioning the li element at the beginning of the list

I'm working on a collapsible Material UI feature and I want to ensure that when a user clicks on an item, it stays at the top of the list. For example, let's say we have a default list with items First, Second, and Third. When the user expands t ...

javascriptjqueryhtmlcssmaterial-ui

Concealing the ellipsis in the will_paginate function of Rails

I'm currently utilizing will_paginate to manage a large number of values, but I am struggling to find a way to hide the "..." portion and the page numbers following it. Here is my current setup: https://i.stack.imgur.com/f2Tt8.jpg However, what I wou ...

htmlcssruby-on-rails

Adding and Deleting HTML elements using jQuery

How can I use jQuery to add a line of HTML to existing HTML and then remove it? Here is the initial code: <div class="form-group"> <label class="control-label col-md-2" for="txtCvc">Cvc</label> <div class="col-md-10"> ...

javascriptjqueryhtmlappendremovechild

Switching on the click functionality

I was able to successfully toggle a boolean variable along with some other options. However, I encountered an issue when trying to create another click function for a different button to set the boolean variable to false. Here is my code: let manageme ...

javascripthtml

Alternative method for concealing modal elements during initial page load

Picture a typical web application page that utilizes jQuery and Knockout to create modal dialogs for data editing. The process runs smoothly as the page loads, with the JS generating the dialogs when buttons are clicked. However, there is a slight issue wh ...

javascriptjqueryhtmlcss

Scrolling with Jquery window.scrollTo results in the page becoming unresponsive

I'm currently revamping a website that features a header with 100% screen height, but I need it to shrink down to 0px when a user starts scrolling. The issue I'm facing is that once the header shrinks to 0px, the page content ends up slightly abo ...

javascriptjqueryhtmlcssscroll

Is it possible to animate captions and slides individually within a Bootstrap 5 carousel?

Beginner coder here, testing my skills with a self-assigned task. I've created a carousel using Bootstrap 5 with three slides, each containing two lines of captions. As the slides transition, the captions move in opposite directions—up and down. Ho ...

javascriptcsshttpcarouselbootstrap-5

Is it possible to personalize the Facebook like box appearance?

Is there a way to modify the number of feeds and enable auto scroll feature in a Facebook likebox? I've been experimenting with the code snippet below but have hit a roadblock. <div id="fb-root"></div><script>(function(d, s, id) {va ...

javascriptjquerycsshtmlfacebook-likebox

The slides on my Bootstrap carousel are failing to display

I attempted to study a Bootstrap carousel code for better understanding, but unfortunately, the slides are not functioning correctly. The first slide remains static without any movement. Any suggestions on how to resolve this issue? Below are the HTML and ...

htmlcsstwitter-bootstrapbootstrap-4