Looking for a solution similar to the one discussed in this question:
CSS - Float to max width
In my project, I am working on a layout that involves a <pic> / <info> style setup, with a twist - I want it to be responsive when the user resizes their browser.
To achieve this, I need to rearrange the order of the <pic> and <info> boxes based on the browser width. When the width decreases below a certain pixel threshold, I want the "float right" property to be removed from the <info> box so that it slots in above the pic box seamlessly.
Here's a link to a JS fiddle showcasing the full-size layout:
Is there a way to make the "Fred" box expand to fill the width up to the red box without relying on specific pixel measurements?
Thank you!