Hi,

Is there a way to specify the order of columns when you are creating breakpoints for mobile stuff? Let me see if I can explain. I have this site I am working on: http://spoonfrogclients.com/nfr2/ There are 3 rows below the big feature image that are white, then gray, then white again. The white rows have the text and then pic and the gray has pic then text. When it responds smaller and everything is stacked, I want the second row (gray one) to display the image last, not first, like the white ones do. Is this possible?

Thanks!

You sure can!

I created a simple mockup using your image and the same type of layout you have. Please see the attached file.

Basically what I did was the image (on desktop) is actually the second column in the row and the text is the first column. Using the Push/Pull feature I "Pulled" the second column (the one with the image) to make it appear as the first column. Then I "Pushed" the first column (the text and button) so it would appear to be the second column in the row.

Then at the breakpoint, I removed the push and pull from both columns causing them to revert to their original order. If you want to learn more about this, we have two articles found here http://www.coffeecup.com/help/articles/ … the-stack/ and here http://www.coffeecup.com/help/articles/ … out-maker/

Hope that helps!

Thank you so much! I will take a look and see if I can figure out how you did it!

Hi,

So is it best for me to mock up the 'desktop' size flipped and then undo it when I get to the mobile size?

Yes, this will allow you to change it back to the normal flow once you reach the desired breakpoint.

Thank You!

That looks like a job for Flexbox

Hi,

Can you please give me a brief summary as to what flexbox does?

The best summary, although not 'brief', can be found here:
http://www.w3schools.com/css/css3_flexbox.asp

There's a guide for working with Flexbox included in the app itself, you can access it through the theme browser. There's also an online version of the Design with Flexbox guide.