Reorder columns in mobile

Is there a way to reorder content for mobile? I have a column structure for desktop and tablet on the About page which has alternating columns of content and images / filler but on mobile they appear one after the other.

http://gander.webflow.io/about

Actually no easy way to describe this! Please take a look at the link. :smile:

Essentially I want to be able to switch content between the columns for mobile but leave desktop and tablet unaffected.

Is that possible?


Here is my public share link: https://preview.webflow.com/preview/gander?preview=66e94cacc751bf5160515b246db32406

maybe this is what you’re looking for?

http://forum.webflow.com/t/how-to-make-responsive-alternating-content-layout-stack-on-top-of-each-other-on-mobile/9334

1 Like

This is exactly it! Thank you!!

I’m trying to implement the solution suggested by @vlogic but thought I’m copying the floats and parameters from the example site it doesn’t seem to be working on mine. I can’t get the divs to sit next to each other. Have played around the float and clear settings without any luck.

Would really appreciate some guidance as think there’s something basic about floats and clears I’m not understanding!

Just be sure that the percentage widths on floats total less than 100% and they should set side by side.

But your example the left div has width 33.33% on desktop and the right div (“responsive photo”) has width 100%…?

Oh! I see the confusion - sorry. The short answer is it is driven by the parent div that contains it.

If you adopt this sort of approach to anything using floats, just be aware that percentage measurements are a total of all attributes of the box model. Margins also influence total width and height. Padding does not influence percentage width or height as it is inside the box in the version of the box model Webflow employs.

So margins have to be factored into your totals or they will break the wrap.

Here is the much longer answer:
I build my own simple columns using nested divs. All of my responsive images are set to 100% width and height so they are drag and droppable to fill anything you poke them in. Their size is structured / managed by the div that contains them. Look at the navigator to see the structure and the settings to see the width attributes applied and you will see the percentage widths on the parent divs driving the actual behavior of the floats.

I also need to rebuild and republish this file ,as the class names are crazy confusing. I published this before Webflow restructured the class selector for globals, so names are apparently different in different views of the same object? Sorry for the added confusion that causes.

1 Like

Thank you so much @vlogic! Turns out I needed to brush up on my basic webflow properties and this task was like a mini-tutorial! Your instructions were perfect. All fixed now :smile:

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.