Search code examples
csslayoutflexboxcss-grid

CSS Layout: Mix order of elements between items of two columns

I am trying to achieve the following:

Layout

The height of elements is not fixed but based on content. The width of elements is a percentage of the layout space.

Is this possible with Flexbox or Grid?

Solution

  • Based on the comments and discussion with @Paulie_D, here is a css only solution that works.

    It makes use of the fact that you can use display: contents to unwrap the items logically when the screen is small, as well as the fact that you can set the place in the order of the element through order: X (both in css).

    .outer {
  display: flex;
  flex-direction: row;
}

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

@media only screen and (max-width: 720px){
  .inner {
    display: contents;
  }
  .outer {
    flex-direction: column;
  }
}
    <div class="outer">
  <div class="inner">
    <div id="a1" style="order:1"> A1
    </div>
    <div id="a2" style="order:4"> A2
    </div>
    <div id="a3" style="order:5"> A3
    </div>
    <div id="a4" style="order:7"> A4
    </div>
  </div>
  <div class="inner">
    <div id="b1" style="order:2"> B1
    </div>
    <div id="b2" style="order:3"> B2
    </div>
    <div id="b3" style="order:6"> B3
    </div>
  </div>
</div>