Jim R Posted February 17, 2020 Share Posted February 17, 2020 http://wolomarketing.com One the desktop, I have a checkerboard pattern set up with two columns and four rows. Navy | Light Blue *Light Blue | Navy Navy | Light Blue *Light Blue | Navy * Class name: .row-reverse On the phone, it shows as one column as... Navy Light Blue Light Blue Navy Navy Light Blue Light Blue Navy I would like it to show up as... Navy Light Blue Navy Light Blue Navy Light Blue Navy Light Blue This was my last effort at reordering the DIVs. The DIVs leading with Light-Blue has a class name of row-reverse. .row-reverse < .span_12 { display: flex; flex-flow: row; flex-wrap: wrap; } Quote Link to comment Share on other sites More sharing options...
requinix Posted February 17, 2020 Share Posted February 17, 2020 I see three blue colors: navy blue with writing, light blue with writing, and the dark blue/gray with images. I can't figure what you're describing according to that. I'm guessing that you want to have text + image / image + text alternating on desktop and then just text + image on mobile. Is that it? Rearrange everything in the markup so that it is correct: text first, image second. Desktop is where you should be making it read backwards. Do that by using looking into whatever options your CSS framework gives you regarding repositioning inside its grid system; if there isn't anything then use order. 1 Quote Link to comment Share on other sites More sharing options...
maxxd Posted February 18, 2020 Share Posted February 18, 2020 Also, for what you've shown us you want "flex-direction: row", not "flex-flow: wrap". That's not going to fix your issue, but it should help cut down on some of the noise while you're debugging the rest of it. Quote Link to comment Share on other sites More sharing options...
Jim R Posted February 19, 2020 Author Share Posted February 19, 2020 On 2/17/2020 at 6:56 PM, requinix said: I see three blue colors: navy blue with writing, light blue with writing, and the dark blue/gray with images. I can't figure what you're describing according to that. I'm guessing that you want to have text + image / image + text alternating on desktop and then just text + image on mobile. Is that it? Rearrange everything in the markup so that it is correct: text first, image second. Desktop is where you should be making it read backwards. Do that by using looking into whatever options your CSS framework gives you regarding repositioning inside its grid system; if there isn't anything then use order. Correct. I do apologize for not being clear. 18 hours ago, maxxd said: Also, for what you've shown us you want "flex-direction: row", not "flex-flow: wrap". That's not going to fix your issue, but it should help cut down on some of the noise while you're debugging the rest of it. I'll change it to wrap. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.