Отзывчивая разметка дивана

Question

Я работаю самостоятельно над созданием веб-сайта для местной компании, и я зациклился на том, как сделать мой макет/дизайн работать оперативно. По состоянию на данный момент, мое содержание выглядит примерно так:

Однако при уменьшении экрана браузера, или, если браузер уже в меньшем разрешении, пункт 3 сместится ниже как пункта 1 и пункта 2 с шириной 100%. Хотя и пункт 1, и пункт 2 будут встроены друг в друга. Так же, как это:

Первоначально я имел и обертывания дивы (1 и 2) устанавливается в display: inline-block. Но я не мог найти ни одного исследования, в котором говорилось, что (после изменения контейнера div в блоке div 2 в соответствующем медиа-запросе) дочерний элемент может быть встроен с отдельным элементом, а другой дочерний элемент в том же контейнере не будет. В последнее время я начал обсуждать использование display: table, display: table-row и display: table-cell, чтобы попытаться организовать контент в виде таблицы, но я не смог найти способ присвоить позиции 1 и 2 в их собственную строку, исключая элемент 3.

Честно говоря, прошло какое-то время, так как мне пришлось возиться с чем угодно HTML/CSS/JavaScript/etc., Поэтому я немного ржавый. Я надеюсь увидеть, сможет ли кто-нибудь указать мне в правильном направлении или дать мне некоторое представление. Благодарю.

Answer 1

Я использовал дизайн жидкости с основными Див, можно увидеть здесь https://jsfiddle.net/74x5975j/6/

<div class="group"> 
    <div class="box-1">BOX 1</div> 
    <div class="box-2">BOX 2</div> 
    <div class="box-3">BOX 3</div> 
</div> 

вот CSS с запросом СМИ:

.group { 
width: 600px; 
height: 300px;  

} 
.box-1 { 
    width: 50%; 
    height: 100%; 
    float: left; 
    background-color: gray; 
    text-align: center; 
    float: left; 
} 
.box-2 { 
    width: 50%; 
    height: 50%; 
    float: left; 
    background-color: blue; 
    text-align: center; 
    float: left;  
} 

.box-3 { 
    width: 50%; 
    height: 50%; 
    float: left; 
    background-color: red; 
    text-align: center; 
    float: left;  
} 
@media only screen and (max-width: 599px){ 
.group { 
    width: 100%; 
    height: 450px;  
} 
.box-1 { 
    height: 66.666%; 
} 
.box-2 { 
    height: 66.666%; 
} 

.box-3 { 
    width: 100%; 
    height: 33.333%; 
} 
}