Responsive flexbox layout: reordering elements

Question

I'm trying to achieve a responsive layout as outlined in the image, left side would be mobile, right side desktop. This would be relatively easy using flexbox if I could set a fixed height for the wrapper, but because the content is dynamic this is not possible.

Another solution would be to use position absolute on element C, but this seems very hacky, I'm hoping to find a more elegant solution.

Here is a framework for the code:

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

@media(min-width: 800px) {
  .wrapper {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

.section {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 36px;
}

.section-a {
  background: green;
  height: 200px;
}

@media(min-width: 800px) {
  .section-a {
    flex-basis: 33%;
  }
}

.section-b {
  background: yellow;
  height: 400px;
}

@media(min-width: 800px) {
  .section-b {
    flex-basis: 66%;
  }
}

.section-c {
  background: blue;
  height: 200px;
}

@media(min-width: 800px) {
  .section-c {
    flex-basis: 33%;
  }
}

<div class="wrapper">
  <div class="section section-a">A</div>
  <div class="section section-b">B</div>
  <div class="section section-c">C</div>
</div>

Thanks for the help!

I'd be using CSS-Grid for this... I'm sure that this has been covered before...I'll see if I can find a duplicate. — Paulie_D, May 23 '18 at 09:23
I don't think this is possible with flex using your layout without adding a some sort of height restriction to the wrapper but perhaps this may give you some ideas: https://stackoverflow.com/questions/19574851/how-to-specify-an-element-after-which-to-wrap-in-css-flexbox — Pete, May 23 '18 at 09:37
Even though the content is dynamic, what's stopping you from using the `overflow-y: auto` or just `overflow: auto`? Personally I'd still go with the Flexbox. — VXp, May 23 '18 at 12:18
Interesting idea, didn't consider that. I'll give it a try tomorrow. — syberen, May 23 '18 at 19:32

Zuber · Answer 1 · 2018-05-23T09:59:41.763

4

You can achieve this by using grid. I have simplified your code and removed unwanted css

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: [row1-start] auto [row2-start] auto [row2-end];
}

.section {
  padding: 20px;
  display: flex;
  align-items: center;
}
.section-a {
  height: 50px;
  background-color: green;
}  
.section-b {
  grid-row: row1-start / row2-end;
  grid-column: 2/-1;
  background-color: yellow;
}
.section-c {
  background-color: blue;
  height: 180px;
}

<div class="wrapper">
  <div class="section section-a">A</div>
  <div class="section section-b">B</div>
  <div class="section section-c">C</div>
</div>

Working fiddle here

edited May 23 '18 at 09:59

answered May 23 '18 at 09:24

Zuber

3,393
1
19
34

1

Thanks, I'll look into this method. I've been apprehensive to use CSS grid so far because of browser support. – syberen May 23 '18 at 10:02
@syberen if this solved your question, please mark this answer as "accepted". it will motivate us to contribute more towards the community. – Zuber Nov 20 '19 at 13:38

AymDev · Answer 2 · 2018-05-23T10:25:33.823

0

Edit: it's an attempt, as I misunderstood OP's question. My answer has a given .wrapper height.

A solution using flex with the following properties:

This code applies for your desktop layout:

.wrapper {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-flow: column wrap;
}

.section {
    width: 50%;
    border: 1px solid black;
    box-sizing: border-box;
}

.section-a {
    height: 25vh; // for example
}

.section-b {
    order: 3;
    flex-basis: 100%;
}

.section-c {
    flex-grow: 1;
}

<div class="wrapper">
    <div class="section section-a">A</div>
    <div class="section section-b">B</div>
    <div class="section section-c">C</div>
</div>

edited May 23 '18 at 10:25

answered May 23 '18 at 09:48

AymDev

6,626
4
29
52

OP is wanting a dynamic height based on a and c - this is fixed to 100vh. **From question:** *This would be relatively easy using flexbox if I could set a fixed height for the wrapper, but because the content is dynamic this is not possible.* – Pete May 23 '18 at 09:50
1

Thanks for taking the time nevertheless! – syberen May 23 '18 at 10:26

Responsive flexbox layout: reordering elements

2 Answers2