Reflow Issues with Grid


I am having a reflow issue when using grids for a two column website. When I resize the screen on desktop the elements start to separate from each other as shown in my screenshot.

How can I keep the elements from separating while still being able to rearrange the order my elements in the grid manually on different platforms? Is there a better way to build this? I tried using columns and flex boxes as well but they don’t reflow in the correct order on tablet down to mobile.

This is how I want the site to look:

Here is my site Read-Only: LINK
Published Site: (LINK)