Jump to content
#StayAtHome ×
Jim R

Reordering DIVs for mobile device...

Recommended Posts

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;
    }

 

Share this post


Link to post
Share on other sites

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.

  • Like 1

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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.  

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.