CODEWITHSUNDEEP
htmlcssflexbox
Abhi
Abhi

Reputation: 1574

flexbox displaying sub-div at the top

This is what I want to do:

screenshot

I have the brown part separately at the top as a div. Then the other colors in a content div.

I don't understand how to bring the blue part at the top for < 768px since it is inside the content div .

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    body{
      margin: 0;
      padding: 0;
    }
    .container{
      display: flex;
      flex-direction: column;
    }
    .aquablue{
      padding: 50px;
      background-color: #B0C4DE;
      order: 1;
    }
    .brownC{
      padding: 50px;
      background-color: #663300;
    }
    .yellowC{
      padding: 50px;
      background-color:  #FFCC00;
      order: 3;
    }
    .greenC{
      padding: 50px;
      background-color: #00FF00;
      order: 4;
    }
    .blueC{
      padding: 50px;
      background-color: #336699;
      order: 5;
    }
    @media(min-width: 768px){
      .container{
        display: flex;
        flex-direction: column;
      }
      .content{
        display: flex;
        order: 2;
      }
      .left{
        display: flex;
        flex-direction: column;
        width: 50%;
      }
      .right{
        display: flex;
        flex-direction: column;
        width: 50%;
      }
      .brownC{
        padding: 50px;
        background-color: #663300;
        width: 100%;
        order: 1;
      }
      .yellowC{
        padding: 50px;
        background-color:  #FFCC00;
      }
      .greenC{
        padding: 50px;
        background-color: #00FF00;
      }
      .blueC{
        padding: 50px;
        background-color: #336699;
      }
    }
    </style>
  </head>
  <body>
     <div class="container">
      <div class="brownC"></div>
      <div class="content">
        <div class="left">  
          <div class="aquablue"></div>
          <div class="yellowC"></div>
        </div>
        <div class="right"> 
          <div class="greenC"></div>
          <div class="blueC"></div>
        </div>
      </div>
    </div>
  </body>
</html>

Upvotes: 4

Views: 568

Answers (2)

Dejan.S
Dejan.S

Reputation: 19148

For pure css you can use this solution. What you do is to remove your "structual divs", on your .container is to add flex: row; and flex-wrap: wrap, then give your elements the width they should be, as in this case was width: 100%; for .brownC and width: 50%; for the rest. Does it make sense?

Check the JSFIDDLE

css

* {
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-direction: column;
}

.aquablue {
  padding: 50px;
  background-color: #B0C4DE;
  order: 1;
}

.brownC {
  padding: 50px;
  background-color: #663300;
  order: 2;
}

.yellowC {
  padding: 50px;
  background-color: #FFCC00;
  order: 3;
}

.greenC {
  padding: 50px;
  background-color: #00FF00;
  order: 4;
}

.blueC {
  padding: 50px;
  background-color: #336699;
  order: 5;
}

@media(min-width: 768px) {
  .container {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .brownC {
    width: 100%;
    order: 1;
  }
  .aquablue {
    order: 2;
    width: 50%;
  }
  .yellowC {
    order: 4;
    width: 50%;
  }
  .greenC {
    order: 3;
    width: 50%;
  }
  .blueC {
    order: 5;
    width: 50%;
  }
}

html

<div class="container">
  <div class="brownC">

  </div>
  <div class="aquablue">

  </div>

  <div class="yellowC">

  </div>
  <div class="greenC">

  </div>
  <div class="blueC">

  </div>
</div>

Upvotes: 2

tejashsoni111
tejashsoni111

Reputation: 1405

You can use the move the elements using jQuery on window resize event.

JS FIDDLE : https://jsfiddle.net/tejashsoni111/pdr8qyut/ 

$(document).ready(function(){
    $(window).resize(function(){
        if($(window).width() <= 768){
            jQuery(".aquablue").after(jQuery(".brownC"));
        }else{
            jQuery(".content").before(jQuery(".brownC"));
        }
    })
})

Upvotes: 2

Related Questions