响应列样式网站的CSS - 具有可变高度的堆叠div

Question

我目前正在建立一个快速响应的网站，但我在主页上找到了四个div的问题。 （我的网站是http://wealthartistry.com.au/wa。我遇到与发布此问题的人相同的问题：CSS stacking div with variable height on two columns

然而，将堆叠的div放在两个单独的列中的解决方案将不起作用，因为我的网站是响应式网站，当浏览器宽度达到799px时，我需要按此顺序堆叠div（如果您访问网站并拖动浏览器的边缘更窄你会看到我的意思）：

*

[左上角]

[右上]

[左下]

[右下]

*

如果将div放在这样的列中：

[第1栏] [第2栏]

然后订单最终会成为：

[左上角]

[左下]

[右上]

[右下]

*

这有什么办法吗？

我的基本css代码是这样的：

#contentbox1wrapper {
width: 46.25%;
float: left;
}

#contentbox1 {
padding: 50px;
background: #383838;
margin-bottom: 75px;
}

/*height of div is determined by the amount of content inside*/

#contentbox2wrapper {
width: 46.25%;
float: right;
}

#contentbox2 {
padding: 50px;
margin-bottom: 75px;
background: #1e75bc;
}

#contentbox3wrapper {
width: 46.25%;
float: left;
clear: left;
}

#contentbox3 {
padding: 50px;
background: #1e75bc;
margin-bottom: 75px;
}

#contentbox4wrapper {
width: 46.25%;
float: right;
}

#contentbox4 {
padding: 50px;
background: #eaeaea;
margin-bottom: 75px;
}

和HTML：

<div id="homepageContent">
<div id="contentbox1wrapper">
    <div id="contentbox1">

    </div>
</div>
<div id="contentbox2wrapper">
    <div id="contentbox2">

    </div>
</div>
<div id="contentbox3wrapper">
    <div id="contentbox3">

    </div>
</div>
<div id="contentbox4wrapper">
    <div id="contentbox4">

    </div>
</div>
</div>