0

I'm trying to achieve two different looks based on browser resolution only with CSS. The first fiddle works perfectly besides the weird space due to the rows needing to be the same size:

HTML:

<div id="box-container">
  <div id="box1"></div>
  <div id="box2"></div>
  <div id="box3"></div>
  <div id="box4"></div>
</div>

Mobile: https://jsfiddle.net/c1xLqmdc/4/ CSS:

#box-container{
  display:flex;
  flex-flow: wrap;
}
#box1{
  background-color:cyan;
  width:50%;
  height:200px;
  order:1
}
#box2{
  background-color:magenta;
  width:50%;
  height:150px;
  order:2;
}
#box3{
  background-color:yellow;
  width:50%;
  height:100px;
  order:3;
}
#box4{
  background-color:black;
  width:50%;
  height:150px;
  order:4;
}

#box1,#box2,#box3,#box4{
  width:100%;
}

Desktop: https://jsfiddle.net/c1xLqmdc/ CSS:

#box-container{
  display:flex;
  flex-flow: wrap;
}
#box1{
  background-color:cyan;
  width:50%;
  height:200px;
  order:1
}
#box2{
  background-color:magenta;
  width:50%;
  height:150px;
  order:2;
}
#box3{
  background-color:yellow;
  width:50%;
  height:100px;
  order:3;
}
#box4{
  background-color:black;
  width:50%;
  height:150px;
  order:4;
}

/*#box1,#box2,#box3,#box4{
  width:100%;
}*/

So I tried switching to columns to fix the gap, and now it works perfectly for desktop but they are in the wrong order for mobile.

HTML:

<div id="box-container">
  <div id="box-column-left">
    <div id="box1"></div>
    <div id="box3"></div>
  </div>
  <div id="box-column-right">
    <div id="box2"></div>
    <div id="box4"></div>
  </div>
</div>

Mobile: https://jsfiddle.net/ar90Ly20/2/ CSS:

#box-container{
  display:flex;
  flex-flow:row wrap;
}

#box-column-left{
  width:100%;
}
#box-column-right{
  width:100%;
}

#box1{
  background-color:cyan;
  width:100%;
  height:200px;
  order:1
}
#box2{
  background-color:magenta;
  width:100%;
  height:150px;
  order:2;
}
#box3{
  background-color:yellow;
  width:100%;
  height:100px;
  order:3;
}
#box4{
  background-color:black;
  width:100%;
  height:150px;
  order:4;
}

Desktop: https://jsfiddle.net/ar90Ly20/ CSS:

#box-container{
  display:flex;
  flex-flow:row wrap;
}

#box-column-left{
  width:50%;
}
#box-column-right{
  width:50%;
}

#box1{
  background-color:cyan;
  width:100%;
  height:200px;
  order:1
}
#box2{
  background-color:magenta;
  width:100%;
  height:150px;
  order:2;
}
#box3{
  background-color:yellow;
  width:100%;
  height:100px;
  order:3;
}
#box4{
  background-color:black;
  width:100%;
  height:150px;
  order:4;
}

Is this possible to accomplish the first mobile example, and the second desktop example without changing the HTML?

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Erica
  • 1
  • Do you have a specific breakpoint you are trying to use for desktop vs mobile? – Alex Mar 21 '18 at 18:26
  • @Alex The mobile CSS is going to be wrapped in `@media screen and (max-width: 425px)` assuming I can get one set of HTML to work for both. – Erica Mar 21 '18 at 18:30
  • Yes. It's possible. This may help you understand and solve the problem. https://stackoverflow.com/q/34480760/3597276 – Michael Benjamin Mar 21 '18 at 18:35

1 Answers1

1

The simple solution would be to just offset the top margin for box 4. FIDDLE

HTML:

<div id="box-container">
  <div id="box1"></div>
  <div id="box2"></div>
  <div id="box3"></div>
  <div id="box4"></div>
</div>

CSS:

#box-container{
  display:flex;
  flex-flow: wrap;
}
#box1{
  background-color:cyan;
  width:50%;
  height:200px;
  order:1
}
#box2{
  background-color:magenta;
  width:50%;
  height:150px;
  order:2;
}
#box3{
  background-color:yellow;
  width:50%;
  height:100px;
  order:3;
}
#box4{
  background-color:black;
  width:50%;
  height:150px;
  margin-top: -50px;
  order:4;
}




@media screen and (max-width: 425px) {
  #box-container{

    flex-flow: row wrap;
  }
  #box4{ 
    margin-top: 0px;  
  }

  #box1,#box2,#box3,#box4{
    width:100%;
  }
}
Alex
  • 122
  • 9