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

Is my page not displaying correctly due to compatibility view?

My client "jordanzad.com" has a website where the main page design appears broken when viewed in compatibility view. Can you help fix this issue? ...

htmlcss

What is the best way to align vertically a horizontal list that includes both headers and icon images?

My goal is to create a horizontal navigation bar that features menu options with headings and icons below them. Upon hovering over each option, the block's background color should change and slightly increase in size. I initially used percentages for ...

htmlcss

SVG set to fill currentColor but does not dynamically change in high contrast mode

I'm currently working with in-line SVGs on my website. Here's an example: svg { fill: currentColor; } <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" height="25px" viewBox="-13 0 120 30" width="74px"> < ...

htmlcsssvghigh-contrast

Is there a way to customize the background color of Material-UI MenuItem when hovering over it through AutoComplete props?

AutoComplete utilizes the Menu component to display MenuItems as demonstrated in the documentation on those respective pages. I am looking to modify the backgroundColor of a MenuItem when it is hovered over. While I have been successful in changing the co ...

cssreactjsmaterial-ui

Troubleshooting: .NET 6 compatibility issue with Bootstrap theme - tips for resolving

NOTE 2: Watch out for the visual studio IDE auto-filling the CSS initialization, as my issue was resolved in the comment section of the question NOTE: I have confirmed that I have the most recent bootstrap package installed from the manager matching the t ...

cssasp.net.net-corebootstrap-5

Adding additional elements to a div in a horizontal orientation

I am currently working on a project where I need to display bars and restaurants based on specific filter criteria. I have a container div called .resultsContainer where all the results will be displayed. While I can easily append more divs (.barContainer) ...

javascripthtmlcss

Display an image when the iframe viewport is reduced in size by utilizing media queries

I am looking to showcase a demo.html page within a 400px square iframe. When the viewport is smaller than 400px, I want demo.html to only display an image. Then, when clicking on that image in demo.html, the same page should switch to fullscreen mode. Sim ...

javascripthtmlcss

Using Express.js to serve simple SVG files (Technique involving Cheerio.js)

My goal is to manipulate SVGs before sending them through Express.js. The code snippet I am using is as follows: app.get("/iconic/styles/:style/:base/:icon", function (req, res) { var style = req.params.style; var base = req.params.base; var i ...

htmlcssnode.jsexpresssvg

Tips for creating a filter that meets multiple conditions in HTML

Click here for image descriptionI have the following code where I am utilizing story owner and story state. ng-repeat="item in IterationStories | filter: {Story: {storyOwner: filterRequestor}} | filter: {Story: {state: filterKey}} " //works fine when ...

angularjshtml

Styling Dropdown Options Based on Conditions in React

In my current project, I am attempting to modify the className of selected items within a mapped array using another array (this.props.notPressAble). The reason for this is because I want certain objects in the array to have a different CSS style. handleOp ...

javascriptcssreactjs

Eliminating unnecessary CSS from the codebase of a website

Currently, I am making adjustments to a website template that I downloaded for free online. I have noticed that even if I delete a div from the code, the corresponding CSS styles remain in one or more files. Is there any tool available that can automatic ...

phpjavascriptjqueryhtmlcss

The astonishing font-icon animation feature is exclusively functional on code-pen

I have a problem with a font-icon animation code. When I run it on my local server, the animation doesn't work. It only works on http://codepen.io/TimPietrusky/pen/ELuiG I even tried running it on http://jsfiddle.net/qjo7cf3j/ @import url(http: ...

cssfont-awesome

Troubleshooting the Ineffectiveness of AJAX in Image Map Coordinate Hover Feature

I am currently facing an issue with setting up an image map with ajax hover functionality to retrieve information from the database table major_occurrence. Unfortunately, the ajax call does not seem to be working at all. The hover element is clickable and ...

phphtmlcssajaximagemap

Is the ID selector the quickest method in jQuery and CSS?

Which is the optimal choice in jQuery/javascript for speed? $('#myID .myClass') or $('.myClass') What is the preferred option to utilize in CSS? #myID .myClass{} or .myClass{} In hindsight, I realize my explanation was insuffici ...

javascriptjquerycssjquery-selectorscss-selectors

Leverage AngularJS to dynamically load CSS stylesheets using ng-repeat

I have organized my stylesheets into separate modules for each include, and I am trying to dynamically load them. However, I am facing some difficulties as when they are rendered, all I see is the following markup for each sheet that should be loaded: < ...

htmlcssangularjsheaderangularjs-ng-repeat

The headline box is displaying CSS code instead of the content. How can this issue be resolved?

Having an issue with a WordPress template that features a blue "headline" box that I need to change the color of to #333399. I tried inspecting the element, browsing through the code, and identified the code below as what needed modification: #headline, # ...

csswordpress

How to Align HTML Menu in the Middle of the Page

I've been struggling to center my menu on the page. I tried setting the display to block and using margin auto for left and right, but it's not working as expected. You can see the issue in this JSFiddle. Any help would be appreciated. <ul id ...

htmlcss

Creating a div that automatically resizes to fit a specific width, with excess content wrapping to the next row

In our project, we currently have a design with 4 div elements arranged in two rows and two columns. However, the client has requested that we allow for multiple div elements within a container that spans 100% width. The inner divs should adjust to fit si ...

htmlcss

Ways to reload a webpage from the bottom without any animation

It seems common knowledge that refreshing a webpage on mobile devices can be done by pulling down from the top. However, I am looking to shake things up and refresh the page by pulling up from the bottom instead. And I prefer no animations in the process. ...

javascriptjqueryhtmlcsspull-to-refresh

Avoid using the table and table-striped classes when working with Bootstrap 5 to ensure a

Recently updated to bootstrap5.0.0-beta3 along with bootstrap-table 1.18.2 from webjars repository. Here's the code snippet: <table id="table">...</table> <!-- no classes here --> $('#table').bootstrapTable({ ...

cssbootstrap-tablebootstrap-5