Responsive CSS - reordering div elements

#div1 {
        position: relative;
        max-width: 100%;
        height: 100px;
        background-color: green;
        color: white;
    }

    #div2 {
         position: relative;
        max-width: 100%;
          height: 100px;
        background-color: red;
          color: white;
    }

      #div3 {
         position: relative;
        max-width: 100%;
          height: 100px;
        background-color: blue;
          color: white;
    }

    @media (max-width: 400px) {

     #div1 {
          position: absolute;
        max-width: 100%;
        height: 100px;
        background-color: green;
        color: white;
    }

    #div2 {
         position: absolute;
         left: 0;
        max-width: 100%;
          height: 100px;
        background-color: red;
          color: white;
    }

      #div3 {
         position: relative;
        max-width: 100%;
          height: 100px;
        background-color: blue;
          color: white;
    }

}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title></title>
<meta charset="utf-8" />
    
<body>

<div id="div1">
  <h1>Box 1</h1>   
</div>

<div id="div2">
    <h1>Box 2</h1>   
</div>
<div id="div2">
    <h1>Box 3</h1>
</div>

</body>
</html>

Is it possible to rearrange the order of divs based on the device I am viewing my site on? I am striving for a responsive design. The current layout has 3 divs placed in ascending order on desktop view, but I would like to change the order to 2, 1, 3 for mobile devices. Is there a way to achieve this using only CSS? I lack expertise in this area and would appreciate any suggestions or solutions. Thank you!

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title></title>
<meta charset="utf-8" />

<style>
    #div1 {
        position: relative;
        max-width: 100%;
        height: 100px;
        background-color: green;
        color: white;
    }

    #div2 {
         position: relative;
        max-width: 100%;
          height: 100px;
        background-color: red;
          color: white;
    }

      #div3 {
         position: relative;
        max-width: 100%;
          height: 100px;
        background-color: blue;
          color: white;
    }

    @media (max-width: 400px) {

     #div1 {
          position: absolute;
        max-width: 100%;
        height: 100px;
        background-color: green;
        color: white;
    }

    #div2 {
         position: absolute;
         left: 0;
        max-width: 100%;
          height: 100px;
        background-color: red;
          color: white;
    }

      #div3 {
         position: relative;
        max-width: 100%;
          height: 100px;
        background-color: blue;
          color: white;
    }


    }
</style>

</head>


<body>

<div id="div1">
  <h1>Box 1</h1>   
</div>

<div id="div2">
    <h1>Box 2</h1>   
</div>
<div id="div2">
    <h1>Box 3</h1>
</div>

</body>
</html>
htmlcssresponsive-design

Answer №1

Apply the flex property to arrange elements and change their order using the order property

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title></title>
<meta charset="utf-8" />

<style>
    #div1 {
        position: relative;
        max-width: 100%;
        height: 100px;
        background-color: green;
        color: white;
    }

    #div2 {
         position: relative;
        max-width: 100%;
          height: 100px;
        background-color: red;
          color: white;
    }

      #div3 {
         position: relative;
        max-width: 100%;
          height: 100px;
        background-color: blue;
          color: white;
    }

    @media (max-width: 400px) {
  body{
    display:flex;/*
    flex-direcion:row;*/
    }
      #div2{
       order:-1;
        }

     #div1 {/*
     position: absolute;*/
        max-width: 100%;
        height: 100px;
        background-color: green;
        color: white;
    }

    #div2 {/*
     position: absolute;
     left: 0;*/
        max-width: 100%;
          height: 100px;
        background-color: red;
          color: white;
    }

      #div3 {
         position: relative;
        max-width: 100%;
          height: 100px;
        background-color: blue;
          color: white;
    }

    }
</style>

</head>


<body>

<div id="div1">
  <h1>Box 1</h1>   
</div>

<div id="div2">
    <h1>Box 2</h1>   
</div>
<div id="div3">
    <h1>Box 3</h1>
</div>

</body>
</html>

Alternative Method:- (Compatible with all browsers)

Introduce a hidden division that is only shown when max-width:400px and conceal the original division. This approach works effectively even in IE versions below 9.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title></title>
<meta charset="utf-8" />

<style>
    #div1, #div1-alter {
        position: relative;
        max-width: 100%;
        height: 100px;
        background-color: green;
        color: white;
    }
    #div1-alter{
        display:none;
    }

    #div2 {
         position: relative;
        max-width: 100%;
          height: 100px;
        background-color: red;
          color: white;
    }

      #div3 {
         position: relative;
        max-width: 100%;
          height: 100px;
        background-color: blue;
          color: white;
    }

    @media (max-width: 400px) {

      #div2{
       order:-1;
        }

     #div1, #div1-alter {/*
     position: absolute;*/
        max-width: 100%;
        height: 100px;
        background-color: green;
        color: white;
    }

    #div2 {/*
     position: absolute;
     left: 0;*/
        max-width: 100%;
          height: 100px;
        background-color: red;
          color: white;
    }

      #div3 {
         position: relative;
        max-width: 100%;
          height: 100px;
        background-color: blue;
          color: white;
    }
    #div1{
        display:none;
    }
    #div1-alter{
        display:inherit;
    }
    }
</style>

</head>


<body>

<div id="div1">
  <h1>Box 1</h1>   
</div>

<div id="div2">
    <h1>Box 2</h1>   
</div>
<div id="div1-alter">
  <h1>Box 1</h1>   
</div>
<div id="div3">
    <h1>Box 3</h1>
</div>

</body>
</html>

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

Stubborn boolean logic that refuses to work together

Seeking guidance on resolving a persistent issue with my website that has been causing me headaches for the past few weeks. This website was created as my capstone project during a recent graduate program, where I unfortunately did not achieve all the desi ...

javascripthtmlruby-on-railsvue.jsboolean

Scrolling up or down in an HTML webpage using a script

Seeking a code snippet for my website that will allow me to achieve the following functionality: Upon clicking on text_head1, a list of lines should scroll down. Subsequently, when I click on text_head2, the previous list should scroll up while the new l ...

phpjavascripthtml

Rotate the front view image to the left view with a three-dimensional twist

I've been attempting to rotate the image using the code below, but I can only manage to go from a front view to a bottom view. My goal is to rotate the image from the front view to the left view. Is there a way for me to achieve this? body { heig ...

htmlcsscss-transforms

The width specified for the table is not being applied

I've been struggling to adjust the width of my table in order to display data from a database. I've tried using inline width, !important tag, id, and class but none have worked. Interestingly, when I apply a fixed width without dynamic data, it w ...

htmlcss

How do I execute 2 functions when the button is clicked?

<button id="take-photo"> Take Image</button> <button type="submit" value="Submit" >Submit </button> How can I trigger two tasks with a single button click? 1. Executing a function based on ID Next 2. Submitting the form with ...

javascripthtml

Extract ID for Bootstrap modal display

In my project, I am using a bootstrap modal that displays various strings. The challenge I am facing involves a loop of cards, each with a distinct 'id'. When triggering the modal, I want to show the corresponding id inside the modal itself, whic ...

javascriptjqueryhtmlcsstwitter-bootstrap

Choose children input textboxes based on the parent class during the onFocus and onBlur events

How can I dynamically add and remove the "invalid-class" in my iti class div based on focus events in an input textbox, utilizing jQuery? <div class="form-group col-md-6"> <div class="d-flex position-relative"> & ...

javascripthtmljquery

Seeking animated SVGs using CSS styling

I've been trying to animate my SVG icon, but I seem to be missing something. I'm still fairly new to CSS animations. The issue I'm facing is that the position of the SVG isn't correct when the website loads. Additionally, during the an ...

htmlcssanimationsvg

The color of hyperlinks in firefox varies based on the specific URL being visited

I am a beginner in the world of html and css. I have two links placed consecutively. In my css file, I have defined classes for a:link and a:hover. However, I noticed that the second link is displaying a purple color instead of silver. Both links correctly ...

htmlcssfirefoxcolorshyperlink

CSS hover effect ceases to function after the button has been clicked once

I am facing a dilemma with styling that I can't seem to resolve. There is a basic toggle feature on my page with two options -- the user can select either Toggle1 or Toggle2, resulting in different data being displayed dynamically based on the active ...

javascripthtmljquerycss

A method for determining the quantity of <li> elements within a <ul> container while applying specific conditions

I am currently using document.querySelectorAll('ul > li').length to count the total number of items in my list. However, I am wondering if there is a way to count only those items that meet a specific condition. For example: <ul> < ...

javascripthtmlreactjs

CrispyForms: FormHelper - Easily move the </form> tag to a different location and manage multiple forms from a single model

When utilizing FormHelper and invoking the Form using {% crispy form %}, it generates a Form wrapped within <form> tags. However, my Template is structured into two columns. The first column displays the dynamically generated {% crispy form %}. The ...

pythonhtmldjangodjango-formsdjango-crispy-forms

Selection menu drops down once the save is complete

I have two drop-down menus named source and campaign, displaying data from the database. In addition to these drop-downs, there are other input fields as well. My concern is that I want to save the filled data along with the selected options in the drop-do ...

phphtmlmysql

What could be causing the background image on my element to not update?

I'm attempting to utilize a single background image that is 3 pixels wide and 89 pixels tall. Each vertical stripe of 1 pixel will serve as the background for a different div. I had presumed that adjusting the background-position by -1px 0 and specif ...

javascriptjqueryhtmlcss

The innerHTML of the p tag remains unaffected when using document.getElementsById("")

HTML {% load static %} <link rel="stylesheet" type="text/css" href="{% static 'lessons/style.css' %}" /> <script> function openNav() { document.getElementById("mySidenav").style.width = "20%"; document.getElementById("main" ...

javascripthtmlcssdjangofor-loop

The issue with MUI TextField: the outline is overlapping the label

Recently, I encountered an issue with a MUI TextField in my project. In its default state, everything appeared fine: https://i.stack.imgur.com/WFzOr.png However, when I increased the font size as per the theme provided below, the label started to overlap ...

cssreactjsmaterial-ui

Vuejs unstyled content flash

I encountered an issue while loading a page with Vue. Initially, I am able to access variables like @{{ value }} but once the page is fully loaded, the variable becomes invisible. How can I resolve this issue? I have already included Bootstrap and all scri ...

javascripthtmlvue.js

Create an HTML button on the homepage that directs users to the "about" page

I've been struggling to make a button in my Ionic app navigate to a different page upon clicking. Despite being new to Ionic, I've spent hours trying to solve this issue. Below is the HTML code in home.page.html: <ion-header> &l ...

htmltypescriptfunctionionic-framework

Height of CSS border-top

I'm facing an issue with setting the height of my top border. It seems like a traditional solution is not possible based on what I have read so far. However, I am determined to find a workaround for this problem. My goal is to have the border align at ...

htmlcss

Having trouble accessing DOM elements in Durandal

Running on Durandal, this mobile app features names and images on an HTML page. The function below helps format the page: define(function (){ function getAutors(myUrl) { $.ajax({ type: "GET", url: myUrl, data: { num ...

jqueryhtmldurandal