Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Mar 2007
    Posts
    59
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Change Order of DIV mobile view

    As the subject suggests, I have two DIV's. Using flex flow left to right.

    When the screen is a mobile size I want the lower DIV to become the top DIV, any ideas how to do this?

    So on desktop

    DIV 1 | DIV 2

    On mobile

    DIV 2

    DIV 1

  2. #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    3,282
    Thanks
    1
    Thanked 558 Times in 544 Posts
    Hi there kiwis,




    try it like this...

    Code:
    
    <!DOCTYPE HTML>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
    
    <title>untitled document</title>
    
    <link rel="stylesheet" href="screen.css" media="screen">
    
    <style media="screen">
    html {
        box-sizing: border-box;
     }
    
    *, *::before, *::after {
        box-sizing: inherit;
     }
    
    body {
        background-color: #f9f9f9;
        font: 100% / 162% verdana, arial, helvetica, sans-serif;
     }
    
    #container {
        display: flex;
        justify-content: space-around;
     }
    
    #container > div {
        width: 49.5%;
        padding: 1em;
        border: 1px solid #999;
        background-color: #fff;
     }
    
    @media ( max-width:30em ) {
    #container {
        flex-wrap: wrap-reverse;
     }
    
    #container > div {
        width: 99.5%;
     }
    
    #container > div:last-of-type {
        margin-bottom: 0.25em;
     }
    }
    </style>
    
    </head>
    <body>
     
     <div id="container">
      <div>content one</div>
      <div>content two</div>
     </div>
    
    </body>
    </html>

    coothead
    Last edited by coothead; Aug 11th, 2018 at 10:54 AM.
    ~ the original bald headed old fart ~


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •