All geek questions in one place

Flexbox display sub-div at the top

This is what I want to do:

screenshot

I have a brown piece separately at the top like div. Then the other colors in content div.

I do not understand how to bring the blue part at the top for <768px, since it is inside 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>
Run codeHide result
+4
source share
2 answers

For pure css you can use this solution. You have to remove their "structural the divs", on your .containeradd flex: row;and flex-wrap: wrapthen provide its cell width, which they should be, as in this case it was width: 100%;for .brownC, and width: 50%;for the others. Does it make sense?

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>
+2

jQuery resize.

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"));
        }
    })
})
+2

Source: https://habr.com/ru/post/1665297/

More articles:


All Articles