Flexbox: Wrapping an element without nesting

Question

I have a flexbox layout which follows a certain order on mobile and should reorder itself on desktop/tablet. All the elements are thrown into one wrapper being able to reorder.

The order on mobile is as follows:
Aside 1st
-> Image 1
Content
Aside 1st
-> Image 2
Aside 2nd
-> Image 3

On desktop i'd like to have:
Aside 1st
-> Image 1
-> Image 2
Content
Aside 2nd
-> Image 3

So the problem on desktop is that the second image should wrap below the first image. Nesting can't be done here because it would throw the desired order on mobile.

<div class="wrapper">

  <div class="left-first">
    <img src="http://lorempixel.com/g/200/200/">
  </div>

  <div class="content">
    [ ... ]
  </div>

  <div class="left-second">
    <img src="http://lorempixel.com/g/300/300/">
  </div>

  <div class="right">
    <img src="http://lorempixel.com/g/250/250/">
  </div>
</div>

Let me illustrate the problem with this fiddle: https://jsfiddle.net/wd8obb0k/

Thanks a lot for your help!

the media query itself is _not_ the problem, thank you, it's rather the wrapping issue i've shown over on jsfiddle — oppenheimer, Nov 17 '16 at 12:27
Flexbox doesn't work that way. See the duplicate for an explanation and alternatives. — Michael Benjamin, Nov 17 '16 at 16:43
@Michael_B I believe there is a difference between the linked as dup question and this one. In the other question, using col-wrap is ok because the 2 widths are the same. In this question, it isn't so. — vals, Nov 17 '16 at 17:43
The col-wrap was an alternative. The point is that flex items cannot wrap beneath other items on the same row. Items must wrap to new rows. — Michael Benjamin, Nov 17 '16 at 17:45
Yes, you are right, but I believe that in this particular case the requested layout can be hacked — vals, Nov 17 '16 at 18:01

score 0 · Answer 1 · answered Nov 17 '16 at 18:00

This is a request that isn't achievable with flex.

But your case can be handled with a little bit of a trick.

I have added some properties to your left-second item, relying on the fact that the flex basis is fixed, and that the images are squares:

.wrapper {
  display: flex;
  flex-flow: row wrap;
  background-color: pink;
}
img {
  width: 100%
}
.content {
  flex: 1 0 60%
}
.left-first,
.left-second,
.right {
  flex: 0 0 20%;
}
.left-first {
  order: 0;
}
.left-second {
  order: 1;
  margin-left: -20%;
  margin-bottom: 20%;
  transform: rotate(-90deg) translateX(-100%) rotate(90deg);
}
.content {
  order: 2
}
.right {
  order: 3
}

<div class="wrapper">

  <div class="left-first">
    <img src="http://lorempixel.com/g/200/200/">
  </div>

  <div class="content">
    <h3>H3 - Lorem ipsum Incididunt magna nostrud sint.</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <h3>H4 - Lorem ipsum Ad labore laborum.</h3>
    <p>
      Lorem ipsum Sit proident laboris id eu in Ut non laboris id mollit ut elit dolor velit est nisi magna adipisicing culpa et mollit do do tempor enim exercitation.
    </p>
    <h3>H4 - Lorem ipsum Ad labore laborum.</h3>
    <p>
      Lorem ipsum Sit proident laboris id eu in Ut non laboris id mollit ut elit dolor velit est nisi magna adipisicing culpa et mollit do do tempor enim exercitation.
    </p>
  </div>


  <div class="left-second">
    <img src="http://lorempixel.com/g/300/300/">
  </div>

  <div class="right">
    <img src="http://lorempixel.com/g/250/250/">
  </div>
</div>

this trick is pretty cool and indeed works for square images. though my example was of course an abstract one. in the real world the content isn't just images and heights are unknown. thanks again for looking into it! i opted for a _nasty_ js workaround. — oppenheimer, Nov 17 '16 at 20:57

Flexbox: Wrapping an element without nesting

1 Answers1