Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 14
  1. #1
    Senior Member hagen's Avatar
    Join Date
    Aug 2005
    Posts
    408
    Member #
    10882
    Liked
    1 times

    Question Responsive site help

    Hi I have a 3 column site as follows in standard width....

    A B C

    When the site is in narrow mobile mode B needs to come first.

    So in order I need in the html:

    <div B>
    <div A>
    <div C>

    But if I have that, then there is no way to float as in the standard width... is there?

    Any ideas greatly appreciated.
    Hagen Rose: hagen(at)jxwd(dot)co(dot)uk
    JX Web Development, Bournemouth, Dorset...JXWD.co.uk

  2.  

  3. #2
    Senior Member Vapr_Arts's Avatar
    Join Date
    Oct 2013
    Location
    California
    Posts
    1,930
    Member #
    37412
    Liked
    544 times
    Why exactly would the order change depending on size of the screen? Even if you are not using the alphabet or numbers i still cant think of a reason why the order would change depending on something like that?


    Regretfully sent from my iPhone using Tapatalk during lunch and other breaks

  4. #3
    Senior Member Andrew Yurlov's Avatar
    Join Date
    Apr 2011
    Location
    Portland, OR
    Posts
    1,306
    Member #
    27566
    Liked
    181 times
    I don't know why you need this but here is a working FIDDLE. Since there is no way of doing it that I know of this is the workaround I used.

    EDIT: As an alternative you can create another section. Lets call it AA and place its html above A. Make the content of AA identical to B and use a display: none on AA. Once the site is in mobile mode all you have to do is display: block on AA and display: none on B.

    It might not be the best or most efficient way to do it but I guarantee it will work.
    This is all under the assumption that you're using media queries for its responsiveness.
    Last edited by Andrew Yurlov; Jan 20th, 2015 at 07:09 PM.
    Artificial intelligence is nothing compared to natural stupidity -Someone

    Design is a funny word. Some people think design means how it looks.
    But of course, if you dig deeper, itís really how it works.
    -Steve Jobs



  5. #4
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    You need negative margins in this case.

    Example - In search of the One True Layout - One True Layout? <-- this will give you the idea.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  6. #5
    Senior Member hagen's Avatar
    Join Date
    Aug 2005
    Posts
    408
    Member #
    10882
    Liked
    1 times
    both great solutions that fix the issue robustly...

    thanks -Hagen
    Hagen Rose: hagen(at)jxwd(dot)co(dot)uk
    JX Web Development, Bournemouth, Dorset...JXWD.co.uk

  7. #6
    Senior Member hagen's Avatar
    Join Date
    Aug 2005
    Posts
    408
    Member #
    10882
    Liked
    1 times
    the center has the most important information... the sides are just sundry information... and the title bar of the center ties in with the navigation... so is a usability issue too...

    here is the site check it out: http://womeninlogistics.org.uk/
    Hagen Rose: hagen(at)jxwd(dot)co(dot)uk
    JX Web Development, Bournemouth, Dorset...JXWD.co.uk

  8. #7
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Other than the "Labyrinth" logo being too large and maybe contrast issues, I don't see anything wrong with the layout. It looks good. What are we looking at?
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  9. #8
    Senior Member Andrew Yurlov's Avatar
    Join Date
    Apr 2011
    Location
    Portland, OR
    Posts
    1,306
    Member #
    27566
    Liked
    181 times
    I think he is trying to show us why he needs the "div b" on the top. It has the most important information therefor he wants it on the top for mobile users.
    Artificial intelligence is nothing compared to natural stupidity -Someone

    Design is a funny word. Some people think design means how it looks.
    But of course, if you dig deeper, itís really how it works.
    -Steve Jobs



  10. #9
    Senior Member breno's Avatar
    Join Date
    Feb 2015
    Location
    Australia
    Posts
    138
    Member #
    41574
    Liked
    29 times
    Another super easy way is this, flexboxing:
    remove floats.

    on container -
    display: flex;
    flex-direction: column;

    on each flex item set order number.

    http://jsfiddle.net/oat3smgk/3/

    done
    Last edited by breno; Feb 08th, 2015 at 01:52 AM.

  11. #10
    Senior Member hagen's Avatar
    Join Date
    Aug 2005
    Posts
    408
    Member #
    10882
    Liked
    1 times
    That's way cool thank you :-) :-)
    Hagen Rose: hagen(at)jxwd(dot)co(dot)uk
    JX Web Development, Bournemouth, Dorset...JXWD.co.uk


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 07:02 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com