CSS pure square folds in a certain way

Question

I need to collapse divs (left: logo, banner, right: group A buttons, button B groups)

I want them to crash in a certain way depending on the screen size:

• Button Group B Fails
• Destruction of the banner

If the screen resolution is super high, I want to have a logo + logo on the left (red + green), an empty space in the middle and two groups of buttons on the right (blue + purple)

See image below:

This is what I have tried so far:

https://jsfiddle.net/ey74wud6/

Honestly, these were trial and error, and the boxes are crumbling, which is not very good for me.

<style>
    /* just example - color, fixed size of box */
    .green { background: green; width: 80px; height: 70px; }
    .red { background: red; width: 270px; height: 70px; }    
    .purple { background: purple; width: 70px; height: 70px; }
    .blue { background: blue; width: 70px; height: 70px; }
    .box { margin: 2px; }

    /* proper css experiments */

    .left {
        float: left;
    }

    .left .box {
        float: left;
    }

    .right {
        float: right;
    }

    .right .box {
        float: left;
    }
</style>

<div class="left">        
    <div class="box green"></div>
</div>

<div class="left">        
    <div class="box red"></div>
</div>

<div class="right">        
    <div class="box purple"></div>
</div>

<div class="right">        
    <div class="box blue"></div>
</div>

I know I can do this with a little javascript help, but my question is: is it possible to solve my problem using pure CSS?

Any help would be appreciated

Answer 1

css media. : https://jsfiddle.net/ey74wud6/1/

css, :

@media (max-width: 454px) {
    .left {
         width : 280px;
    }

    .right {
        width: 80px;
    }
}

@media (min-width: 455px) and (max-width: 522px) {
    .left {
         width : 360px;
    }

    .right {
        width: 80px;
    }
}

Answer 2

, : flex

flex-shrink/grow .

mediaqueries