• Locked
1 reply [Last post]
Fri, 2014-11-14 00:07
Tojo
Tojo's picture
Offline
Regular
Last seen: 7 years 20 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

Top
Tags:
Fri, 2014-11-14 00:52
#1
Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 4 weeks 2 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

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

Top
  • Locked