CSS. flexbox. Is it possible to achieve this behavior?

Question

css

Is it possible to achieve this behavior with Flexbox?

Of course, with media-queries. Of the problems, I encountered the fact that I could not set the property to the elements so that they were on the second line. Fit width fails due to fixed-width blocks.

Answer 1

in media-query set order

@media screen and (max-width: 800px) {
    .main {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
    }

    .item {
      display: inline-flex;
    }

    .item1, .item5 {
      width: calc(50% - 50px);
    }

    .item2, .item4 {
      width: calc(50% - 25px);
    }

    .item1 {
      order: 1;
    }

    .item2 {
      order: 4;
    }

    .item3 {
      order: 2;
      width: 100px;
    }

    .item4 {
      order: 6;
    }


    .item5 {
      order: 3;
    }

    .item6 {
      order: 5;
      width: 50px;
    }

  }

<div class="main">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
  <div class="item item4">4</div>
  <div class="item item5">5</div>
  <div class="item item6">6</div>
</div>

Answer 2

Solution example