That isn’t too hard to accomplish. You can do it using getResourceField if you don’t plan on changing the documents, or getResources if you do.
For getResources, try something like this in your home page template:
<div class="header">...</div>
<div class="slider">...</div>
<div class="top-area">
[[getResources?
&parents=`middle-container-id`
&tpl=`home-page-document`
&depth=`0`
&limit=`0`
&includeContent=`1`
&sortby=`menuindex`
&sortdir=`menuindex`
]]
</div>
<div class="bottom-area">
[[getResources?
&parents=`bottom-container-id`
&tpl=`home-page-document`
&depth=`0`
&limit=`0`
&includeContent=`1`
&sortby=`menuindex`
&sortdir=`menuindex`
]]
</div>
Make sure you replace "bottom-container-id" and "middle-container-id" with the respective document ids. Then for your "home-page-document" chunk, you just do something like this:
<div class="home-page-document-wrapper">[[+content]]</div>
Obviously that wrapper div is optional, but that should get you started.