What is the best method for flipping the sequence of elements in media queries?

I am facing an issue with two divs, left and right, on my webpage. When the screen size is less than 500px, I want the left div to move to the bottom and the right div to move to the top. Essentially, I need to swap the positions of these divs in the DOM.

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

Currently, I am using display: flex, but when I reverse the order of the divs, they display inline and do not respect the 100% width property. What am I doing wrong?

HTML

<div class='nav'>
    <div class='container'>
        <div class='left_bottom'>
            LEFT/BOTTOM
        </div>
        <div class='right_top'>
            RIGHT/TOP
        </div>
    </div>
</div>

CSS

.nav{
    background-color: red;
}
.container{
    width: 100%;
}
.left_bottom{
    padding: 15px 0 15px 0;
    background-color: green;
    float: left;
    width: 33.33%;
    text-align: center;
}
.right_top{
    padding: 15px 0 15px 0;
    background-color: blue;
    float: right;
    width: 66.66%;
    text-align: center;
}
@media (max-width: 500px){
    .left_bottom{
        float: left;
        width: 100%;
    }
    .right_top{
        float: left;
        width: 100%;
    }
    .container{
        display: flex;
        flex-direction: row-reverse;
    } 
}

JS FIDDLE

htmlcssflexbox

Answer №1

It is recommended to make use of flexbox for structuring layouts on both desktop and mobile devices.

For desktop:

.container{
    display: flex;
}

For mobile (option 1):

@media (max-width: 500px){
    .container{
        flex-direction: column; /*displayed in a column format*/
    } 
    .left_bottom{
        order: 2; /*moved to the bottom*/
        width: 100%; /*occupies full width*/
    }
    .right_top{
        order: 1; /*moved to the top*/
        width: 100%; /*occupies full width*/
    }
}

View example on jsFiddle

For mobile (option 2):

@media (max-width: 500px){
    .container{
        flex-direction: column-reverse; /*column & reverse order of items*/
    } 
    .left_bottom, .right_top{
        width: 100%; /*occupies full width*/
    }
}

View example on jsFiddle

Answer №2

Give this solution a try and let me know if it meets your expectations.

.menu{
    background-color: purple;
}
.wrapper{
    width: 100%;
}
.top_section{
    padding: 10px 0 10px 0;
    background-color: orange;
    float: left;
    width: 50%;
    text-align: center;
}
.bottom_section{
    padding: 10px 0 10px 0;
    background-color: pink;
    float: right;
    width: 50%;
    text-align: center;
}
@media (max-width: 700px)
    {
        .top_section{
            float: none;
            width: 100%;
        }
        .bottom_section{
            float: none;
            width: 100%;
        }
        
    }
    <div class='menu'>
        <div class='wrapper'>
          <div class='top_section'>
                TOP SECTION
            </div>  
          <div class='bottom_section'>
                BOTTOM SECTION
            </div>
            
        </div>
    </div>

Answer №3

If you're looking to achieve a layout similar to the following, you can use the code snippet below:

<div class="container">
    <div class="right_top">RIGHT/TOP</div>
    <div class="left_bottom">LEFT/BOTTOM</div>
</div>

Here is the accompanying CSS:

.container {
    width:100%;
    text-align:center;
}
.left_bottom {
    padding:15px 0;
    background-color: green;
    float:left;
    width:33.33%;
}
.right_top {
    padding:15px 0;
    background-color: blue;
    float:right;
    width:66.66%;
}
@media (max-width: 500px) {
    .left_bottom,
    .right_top {
        width:100%;
        float:none;
        clear:both;
}

You can view a live demo of this setup here.

Answer №4

To style the red block, assign it the class order-first. Then, in your CSS media query, add a rule like the following:

.order-first {
  order: 1;
}

This code snippet is specifically for use with flexbox CSS.

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

Customize Your AJAX POST URL with Radio Buttons - A Step-by-Step Guide

I'm looking for some guidance on how to use AJAX to change the post URL based on a radio button selection. Do I need to use an if statement or is there another way? var barray = []; function cbutton() { $('input:radio[name="cheking"]:checke ...

javascripthtmljqueryajax

Mastering the Art of Utilizing $(this) in jQuery

$(".item_listing").hover(function(){ $(".overlay_items").display(); },function(){ $(".overlay_items").hide(); } ); This is my jQuery code. I am trying to display the "overlay_items" div when the "item_listing" div is hovered ov ...

javascriptjqueryhtmlcss

Tips for aligning inline elements in the center of a webpage

My goal is to center the title in the middle of the page, taking into account its alignment with the search bar. However, I want it to be centered independently and not affected by the search bar's position. Is there a way to achieve this? To better ...

htmlcss

Is there a way for my website visitors to seamlessly download the font I use if it's not already installed on their devices?

I've chosen the unique font ff-clifford-eighteen-web-pro-1 for my website. I'm looking to ensure that all text is consistently displayed in this font, even for users who may not have it downloaded on their device. Is there a way to make this hap ...

htmlfontscss

Is Html.Raw necessary for handling ragged html generated by Razor?

When it comes to generating HTML in a dynamic grid model using Razor, the following code snippet is often used: @{ int blockCounter = 0;} @foreach (var item in Model.Items) { if (blockCounter++ % 3 == 0) { //ragged html open here, when needed ...

htmlrazorhtml-helperrazor-2

Having trouble getting the sorting/search function to work with a click event to display content. It seems to only work with a single item - possibly an issue with the

Creating a function that involves multiple boxes with a search function. The search function is working for the most part, but when clicking on a result, certain content should display. function filterFunction() { var input, filter, ul, li, a, i; ...

javascripthtmlcss

Incorrect outcome when utilizing ajax to update a div within a for each loop

For a while now, I've been facing an issue with a div and form within a forEach loop. When one of the forms in the loop is submitted, the content inside the corresponding div is updated in the database and refreshed using JavaScript and Ajax. The upda ...

javascriptphpjqueryhtmlajax

Transition in the background color of a button while the superfish menu gracefully drops down

I am currently using a customized drop down menu created with Superfish. My goal is to incorporate an independent fade-in effect for the drop down menu. The background color should change on mouseover and the drop-down box should fade in gradually. You ca ...

jquerycssdrop-down-menufadeinsuperfish

Receiving HTTP POST data using Classic ASP script

I'm currently working on a project and have come across an area where I am facing some challenges. Despite my best efforts, I haven't been able to find a solution using Google. In my ASP web application, I've added an HTML canvas that I nee ...

javascriptasp.nethtml

Prevent parent from scrolling when hovering over a div in HTML5

Unfortunately, the scrolling attribute is not supported in HTML5. I'm facing an issue where I have an svg inside an iframe within a div, and I need to enable scroll functionality within the div while preventing the page from scrolling at the same time ...

javascriptcsshtml

Tips for resolving the "Forbidden compound class names" error that occurs when trying to select an input field

As a newcomer to selenium, I am eager to start testing the login page. The text field below is where I need to input the username: <div class="WODM WNDM" data-automation-id="userName"> <div class="gwt-Label WBEM">Email Address</div><i ...

pythonhtmlselenium

What could be causing an unidentified term to be included in the Vue SCSS compilation process

In my Vue application with TypeScript, I encountered an error during compilation that reads as follows: Failed to compile. ./src/style.scss (C:/../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!C:/.../node_modules/vue-loader/lib/loaders/stylePostL ...

cssvue.jssass

Adjust the style of cursor - User Interface Expansion Panel Material Design

Using the MiU component "Expansion panel", I encountered an issue. By default, when the user hovers over the panel, the cursor is set to pointer. I attempted to change it to a default cursor, but my modification did not work. The code for my component is ...

cssreactjsmaterial-ui

Challenges with CSS in Google Chrome web browser (Input field and Submit button)

Having trouble with the alignment of a textbox and button on Chrome, they're not displaying correctly. Here are examples from different browsers; notice how the textbox in Chrome is misaligned. Internet Explorer/Firefox https://i.stack.imgur.com/mf ...

htmlcss

Utilizing HTML to call a function and fetching data from AngularJS

I've been struggling to retrieve the value after calling a function in my HTML file. Despite trying various methods after conducting research, I have not achieved success yet. Take a look at the code below: HTML: <div class="form-group"> & ...

javascripthtmlangularjs

issues with jquery functionality on mobile devices

I'm currently working on a website where I've implemented a jQuery script to dynamically load specific parts of an HTML page with an ID of 'guts' into the main content area. The goal was to keep the menu consistent while only changing t ...

javascriptjqueryhtmlcss

Combining HTML with multiple .ts files in Angular

I've been dedicating time to enhancing an Angular application, particularly a sophisticated table with intricate styling and functionality. Within my component file, there is a whopping 2k lines of code that includes functions for text formatting, ta ...

htmlangulartypescriptfiledivide

Add CSS styling to a single form

When working on a larger project, the goal is to reduce the size of various elements within a form named quickpost-form <div id="qp-form"> Specific elements in the form require a smaller font size such as text, input, input-group, and tex ...

htmlcss

End of ImageButton tag

I am currently working on this code : <div runat="server" class="slide"> <img src="images/picto_detail.gif" onclick='<%# Eval("CampagneRappelId","hideshow(\"details{0}\")")%>' /> <div id='details<%# Eval("C ...

javascriptc#htmlcss

Rearranging the @use directive in Sass

Here are some style snippets: tokens.scss .text-center { text-align:center; } .bold { font-weight: bold; } @mixin text-style-1 { font-size: 1.2rem; font-weight: bold; } component/card.scss @use "../token.scss" as tokens; .card { @i ...

csssass