Can this be achieved with a flexbox or grid?-CodePudding

I am trying to achieve this effect using flexbox and without media query. Can i get this effect with the grid?

desktop -> tablet -> mobile:

CodePudding user response：

Sure, You can achieve something like this using flexbox. I believe the easiest way to do this would be having a main container for all three blocks, and a sub-container for the first two blocks that'll move. Here's a working example:

.container, .subcontainer {
  display: flex;  
  justify-content: space-between;
  flex-wrap: wrap;
}

.container {
  width: 100%;
}

.subcontainer {
  width: 50%;
  min-width: 125px;
}

#block1, #block2, #block3 {
    margin-bottom: 50px;
    width: 100px;
    height: 100px;
}
#block1 {
  background-color: peru;
  margin-right: 25px;
}

#block2 {
  background-color: darkorange;
  margin-right: -50px;
}

#block3 {
  background-color: orange;
  height: unset;
  min-height: 100px;
  display: flex;
  align-items: stretch;
}

<div >
  <div >
    <div id="block1"></div>
    <div id="block2"></div>
  </div>
  <div id="block3"></div>
</div>

CodePudding user response：

Here's an alternate solution, using flexbox, grid, and @media queries. Easier to use flexbox on the 1st and 3rd picture because they have one dimension/direction. With the 2nd picture it's easier to use grid as it's more of a 2D layout that requires you to mind the horizontal and vertical of elements to set up properly.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  display: flex;
  justify-content: space-evenly;
  height: 80vh;
  margin: 3rem;
}

.container>div {
  border: 1px solid black;
  display: grid;
  width: 10rem;
  place-content: center;
}

@media screen and (max-width: 992px) {
  .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 1rem;
  }
  .b {
    grid-column: 1/2;
    grid-row: 2/3;
  }
  .c {
    grid-column: 2/3;
    grid-row: span 2;
  }
}

@media screen and (max-width: 600px) {
  .container {
    display: flex;
    flex-direction: column;
  }
  .container>div {
    flex: 1;
  }
}

<div >
  <div >A</div>
  <div >B</div>
  <div >C</div>
</div>