Make div pull to the right and up with Bootstrap - html

Question

I made a layout with Bootstrap. At desktop resolutions it looks like this:
+---------------+ +-------------+
| | | |
| A | | |
| | | |
+---------------+ | |
| | | C |
| B | | |
| | | |
+---------------+ | |
| | | |
| | +-------------+
| | xxxxxxxxxxxxxxx
| D | xxxxxxxxxxxxxxx
| | xxxxxxxxxxxxxxx
| | xxxxxxxxxxxxxxx
+---------------+ +-------------+
| | | |
| E | | F |
| | | |
+---------------+ +-------------+
| |
| G |
| |
+-------------+
On mobile devices it looks like this:
+---------------+
| |
| A |
| |
+---------------+
| |
| B |
| |
+---------------+
| |
| |
| C |
| |
| |
+---------------+
| |
| |
| |
| D |
| |
| |
+---------------+
| |
| E |
| |
+---------------+
| |
| F |
| |
+---------------+
| |
| G |
| |
+---------------+
My problem is that I need to get rid of the space between C and F indicated by the X's.
Here is my markup:
http://pastebin.com/KTJj72Z0

Answer 1

on div F put negative top margin. It'd pull it above.
like so
#media(min-width:768px){
#F {
margin-top: -100px;
}
}