How to make responsive alternating content layout stack on top of each other on mobile

Design help General
1

Hello all,

I have multiple rows in a section and each row has 2 columns, which contain Text and Image in an alternate fashion.

Here is what it looks like on laptop/desktop version of the website :
Text Image
Image Text
Text Image
Image Text

Now when I switch to mobile version, the columns in each row, stack on top of each other.
Here is what it looks like on mobile/tablet version of the website :

Text
Image
Image
Text
Text
Image
Image
Text

However, I want to achiever following look on mobile :
Text
Image
Text
Image
Text
Image
Text
Image

How do I do this ?

2

I’ve been wondering the same thing. I wish this was an option in the editor. For the time being, my workaround is to duplicate the columns and swap the content the way you want it on mobile. Then hide that version on desktop and vice versa for the original. That way instead of shifting, you just have a copy of it in the right order.

4 Likes
3

Hi @Udit_Gangwani, thanks for the post. At the moment, the solution from @DFink is the best workaround. Currently the Grid only collapses from left to right. Cheers, Dave

4

Thank @DFink and @cyberdave for your answer.

5

Hi @Udit_Gangwani, This has been a question a lot of us have had trouble with for a while! To avoid duplicate content on my site, I use absolute positioning to overcome this. It isn’t the most elegant solution, but it can work in some situations.

I made a demo for you to test out, take a peek at it here: https://webflow.com/design/demokit?preview=72388b288a26874be319ca1f7412d4eb Click on the page titled “Responsive Alternating Content”

Hope this helps! Also, don’t ever hesitate to request for a demo to be added to this list. Post your ideas here: List of interactive demos for common designs, interactions, and layouts - Webflow Tips - Forum | Webflow

6

I just tried an alternative using floats, if you build percentage based divs with floats for your content this is very easy to sort with just a simple shuffle of content order as right is always right and left is always left regardless of which comes first in the flow. When you push your float divs to be 100% width they will stack according to content flow.

1/ float left | 2/ float right

2/ float left | 1/ float right (move the element in the navigator to change order / sequence so your float right is above the float left on alternating rows or sections)

1/ float left | 2/ float right

will post an example in a few minutes.

1 Like
7

example using float left and right:
https://webflow.com/website/alternating-content?s=alternating-content
https://webflow.com/design/alternating-content?preview=aef46f99aa1956211295d230199f1d70

1 Like
8

Can you share the read-only link so we can take a peek at how you achieved this?

9

@thewonglv Hi William, I may not be creating the link correctly? I am able to get to it from the link I provided. Try this:
https://webflow.com/design/alternating-content?preview=aef46f99aa1956211295d230199f1d70

I added a separate abstract class attribute so I could mix widths. I am going to dupe a second page with those turned off just to make it easier to see.

50% wide divs. Floats for left or right. I alternate the page order to control how I want them to stack for media queries since when the content is full 100% width they will naturally stack.

3 Likes
10

I added a second page to the source.

11

@vlogic, very nice solution ! You rock ! :smile:

1 Like
14

Hello @vlogic,

Thank you for this posting! I have one question, I copied the formatting of my test site exactly to your example (minus the text being centered in the left div) and my site is still not stacking like yours in the mobile views. Am I missing something? Here’s the link to the site:
https://preview.webflow.com/preview/responsive-test-test?preview=a3baebdb9fe057fe9509acc4daa9a97b

Thanks,
Dom