Grid Layout, Mobile Troubles

I’m using grid for my design layout and I’ve run into some responsive issues. I’m trying to use a 12 column grid that scales down to a 2 column design. I’ve rearrange a 2x2 grid for mobile (Image stacks on top of Section Text), but my images are jumping all over the place (Breaking Sections). Does anyone have any clue whats going on? Is there a better way to achieve this design?

Here’s my Webflow project link:
https://preview.webflow.com/preview/chalupa-pro?utm_source=chalupa-pro&preview=02a6f9253a398bdfbc63e423b833f9e8

Hi @Jsnowman956,

Hey take out the gaps in your layout.

  1. Don’t worry about the fitting into the grid exactly.
  2. Simply fill the space to the left with the content.
  3. Fill the space to the right with the image.
  4. Doing this will force the grid to wrap naturally, the gaps are not allowing it to flow.
  5. Then on other device views, you will have to manually add sizing the grid to keep it inside the screen - or - in other words giving it some padding.