响应式Div布局重新排列

Question

我一直在为本地公司设计一个网站，我一直坚持如何使我的布局/设计能够起作用。截至目前，我的内容与此类似：

但是，随着浏览器屏幕的缩小，或者浏览器已经处于较小的分辨率，项目3将在第1项和第2项下方移动，宽度为100％。虽然第1项和第2项都是相互内联的。很像这样：

最初，我将包装div（1和2）都设置为display: inline-block。但我找不到任何类型的研究表明（在相应的媒体查询中更改内联块div容器2之后）子元素可以与单独的元素内联，而同一容器中的另一个子元素则不会。最近，我开始讨论使用display: table，display: table-row和display: table-cell来尝试以类似表格的方式组织内容，但我找不到分配方法第1项和第2项分为自己的行，但不包括第3项。

老实说已经有一段时间了，因为我不得不搞乱任何HTML / CSS / JavaScript /等等，所以我有点生疏了。我希望看看是否有人可以指出我正确的方向或给我一些见解。感谢。

Answer 1

我使用了基本div的流体设计，你可以在这里看到https://jsfiddle.net/74x5975j/6/

onPress = () => {
  this.props.navigator.push({
    title: 'Routed!',
    component: Park
  });
};

这是带有媒体查询的CSS：

<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>