Page block collapsing orientation

I’m developing a site using PageBuilder, Materialize.css, and Underscores.me.

I’m trying to set up a situation where the blocks behave in the following manner.

On large viewscreens, all blocks should take up 50% of the content area, sitting side by side.

On medium and small screens, the first block should take up 100% of the content area, and the second block should move below it, but still only take up 50% of the screen.

It’s the third block I’m having a tough time with.

On large screens, it would be oriented below the first block.

On medium and small screens, it would be pushed right, and site to the right of the second block.

The first and second blocks are currently doing what they’re supposed to. The third block, well, I’m not sure what configuration will help me get there, whether it’s two or three columns.

I can’t post a link unless you let me (my first post got called “spam”). So, if you want to see what I’ve got so far, let me know and I’ll post a link.

Thanks!