CODEWITHSUNDEEP
htmlcssmedia-queries
Pleinair
Pleinair

Reputation: 449

How to change html container position with media queries

I have 2 div classes called box1 and box2.

When i change my screen size to 600px or smaller, both box1 and box2 get width:100%, and box1 stays at the top and box2 at the bottom. Is there any way to change these boxes position, so that box2 would stay at the top and box1 at the bottom, without changing element position from html? 

    <!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<title>this is the title</title>


<style type="text/css">


.box1{
    width:100px;
    height:100px;
    background:red;
    float:left;
}

.box2{
    width:100px;
    height:100px;
    background:blue;
    float:right;
}

.wrapper{
    max-width:500px;
}




@media screen and (max-width:600px){  /* for tablets */
    .box1{
        width:100%;
        float:right;
    }
    .box2{
        width:100%;
        float:right;
    }
}


</style>



</head>

<body>

<div class="wrapper">
    <div class="box1"></div>
    <div class="box2"></div>

</div>

<script>


</script>

</body>

</html>

Upvotes: 3

Views: 9773

Answers (1)

Johannes
Johannes

Reputation: 67728

You can add this in your media query:

.wrapper {
  display: flex;
  flex-direction: column-reverse;
}

This will place them below each other and reverse the order given in the HTML code.

.box1 {
  width: 100px;
  height: 100px;
  background: red;
  float: left;
}

.box2 {
  width: 100px;
  height: 100px;
  background: blue;
  float: right;
}

.wrapper {
  max-width: 500px;
}

@media screen and (max-width:600px) {
  .wrapper {
    display: flex;
    flex-direction: column-reverse;
  }
  .box1 {
    width: 100%;
    float: right;
  }
  .box2 {
    width: 100%;
    float: right;
  }
}
<div class="wrapper">
  <div class="box1"></div>
  <div class="box2"></div>

</div>

Upvotes: 7

Related Questions