How to combine the 2 elements on the right in the grid using flexbox?

When reducing the screen, the grid should be like this:

enter image description here

  • That is, you want to get a turnkey solution for the TK? :) - Mikhail Alekseevich
  • No, the question is how to combine the 2 elements on the right of the flexbox - Alexander Antipov
  • the last block in the mobile version at the bottom? - Sergey Novikov
  • Description of all properties, there is an example - Philip Pilipchuk
  • yes, down below. Thanks for the info - Alexander Antipov

1 answer 1

* { padding: 0; margin: 0; box-sizing: border-box; } .b { display: flex; flex-wrap: wrap; } .b-inner { border: 1px solid #ccc; background: #999; height: 100vh; width: 33.333%; } .b-item{ height: 50vh; background: #666; border: 1px solid #ccc; } @media screen and (max-width: 767px) { .b-inner { width: 100%; } } 
 <div class="b"> <div class="b-inner"> <div class="b-item"> </div> <div class="b-item"> </div> </div> <div class="b-inner"> <div class="b-item"> </div> <div class="b-item"> </div> </div> <div class="b-inner"> </div> </div>