<div class="header">
<div class="row">
<div class="row__col">logo</div>
<div class="row__col">contacts_1</div>
<div class="row__col">
<div class="row">
<div class="row__col_12">contacts_2</div>
<!-- скрыть < 992px, показать => 992px-->
<div class="row__col">
<div class="row">
<div class="row__col">button_1</div>
<div class="row__col">button_2</div>
</div>
</div>
</div>
</div>
<!-- копия блока с кнопками -->
<!-- показать < 992px, скрыть => 992px-->
<div class="row__col_12">
<div class="row">
<div class="row__col">button_1</div>
<div class="row__col">button_2</div>
</div>
</div>
</div>
</div>
.row {
display: flex;
flex-wrap: wrap;
}
.row__col {
flex-basis: 0;
flex-grow: 1;
max-width: 100%;
}
[class^="row__col"]:nth-child(odd) {
background: gray;
}
[class^="row__col"]:nth-child(even) {
background: lightgray;
}
.row__col_12 {
flex: 0 0 100%;
max-width: 100%;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.