1 reply [Last post]
Tojo
Tojo's picture
Offline
Regular
Last seen: 3 years 25 weeks ago
Timezone: GMT+1
Joined: 2011-10-21
Posts: 44
Points: 76

If I have two columns how do put column 2 above column 1 when I reduce the viewport and use media queries.

The default is to put column 1 above column 2 but I want the other way around.

Can somebody tell me what I have to do.

//Tony

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 weeks 5 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Hi Tojo, there would be a few

Hi Tojo,
there would be a few ways to achieve this.
It would be easier with an example page to look at.

Here's an example using CSS3 flex. You will need to test it in different browsers although most modern browsers should handle it ok.

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{
  background:white;
}
.flex{
  display:flex;
  flex-direction: row;
}
 
.col1, .col2{
  flex: auto;
}
 
.col1{
   background:yellow;
}
.col2{
   background:green;
}
 
 @media screen and (max-width: 500px) {
   .flex{
      flex-direction: column;
   }
   .col1{
     order:2;
   }
   .col2{
    order:1;
   }
 }
 
 </style>
</head>
  <body>
    <div class="flex container">
      <div class="col1"> col 1</div>
      <div class="col2"> col 2</div>
    </div>
  </body>
</html>

Here's a link to more information: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes