Column alignment under short text

I have a site where I need to have a vertical menu, which I have accomplished by creating the pages with no header and using the menu widget. On one of the pages I need to have a short text blurb at the top, and then a grid of products. So at the top I have the 1/4 area with the menu widget, and then the 3/4 area with the text. The grid of products needs to be three columns wide, but they need to float to the right instead of to the left. Even though the 1/4 menu widget is longer than the 3/4 text area the next three 1/4 elements slide under the menu to the left. How do I get them to stay under the 3/4 text area? I need for them to slide underneath each other when viewed on a phone. I had tried using divs in the text area, but they just squished together on the phone instead of flowing nicely like they should in the layout elements.
http://inaccord.testfor.info/sentryti/products/ I tried putting a 4th 1/4 layout element on that row but the other three just show up at the same vertical level and I need them to slide up closer to the bottom of the text. If I edit the code in Chrome’s developer tools to change <div class=”flex_column av_one_fourth first “> to <div class=”flex_column av_one_fourth “> removing the class “first” from the WatchDog ST box, I get the behavior I want in the browser. Any suggestions?

Thanks!