Flexbox Ordering

For mobile, I would like a fairly simple row based structure:

title
--------
image
--------
text

For bigger screens, I was hoping to have something similar to the following:

title | image
------| continuation of image element
text  | continuation of image element

Is nested flexbox containers needed to achieve this?

At the moment, I have the following code, which isn’t correct because the mobile layoyut has image at the bottom instead of the under the title.

HTML:

<div class="container">
    <div class="content">
        <div class="title"></div>
        <div class="text"></div>
    </div>
    <div class="image"></div>
</div>

CSS (mobile):

.container {
     display: flex;
     flex-direction: column;
}
.image {
    order: 2;
}
.title {
    order: 1;
}
.text {
    order: 3;
}

CSS (bigger screens):

.container {
     display: flex;
     flex-direction: row;
}
.content {
    flex-basis: 50%;
}
.image {
    flex-basis: 50%;
}

Hi,
Actually it’s the opposite, to order flex items they need to be siblings.

Nested items in a div that need to order with another div can be un-nested by using display:contents
At this time it only works in Firefox and Chrome

See this codepen demo and reduce your viewport width to see it work.

Link to full page view

3 Likes

This is a simpler, better supported method using float on the big screen, then employing flex and order only on mobile.

It works, so long as you are happy with a structure where the image comes before the header.

2 Likes

Thanks @Ray.H. Unfortunately I need this to at least work for IE11. I should have said this in the original post! :frowning:

Thanks @SamA74. I’m going to save this and might end up using it. I was hoping to see a flexbox-only solution, which avoids the use of floats. I thought scenarios like this is something flexbox and grid were designed to overcome? Maybe not.

Why? Floats are not deprecated, it’s just they are no longer the only or best method to do everything in layout.
The right code is that which works.
Though my only issue with this one is in the case that putting the image before the heading interferes with the semantic structure.

I could be done, in a fashion with flex alone, by using a column layout which wraps to a second column.
The problem with wrapping columns in flex is that it requires a fixed height for the flex conatiner, which is rarely a good idea.

Grid may be another avenue to explore with this.

1 Like

Honestly, probably from my lack of understanding, but I always thought floats to be “hacky” and I never really knew when to clear them afterwards - which is why I tried to learn a bit of flexbox and grid (still very much a beginner as you can tell).

Sometimes I feel like I should have just learned Bootstrap instead :sweat_smile:

It looks like IE11 only has partial support for grid.

There is another way of reordering boxes with display:table
https://iandevlin.com/rwd/css-stacking-with-display-table.html

Reduce your viewport width on that page to see it stack and reorder

There is a case for the use of float being a bit dated. In the days before display: table and flex it was almost the only way to get a multi column layout. But now there are other methods, though floats still have their uses.

Behave! :unamused:

Yes, I saw that, but the same can be said for flex.

There have been times that I have found IE’s “partial” support for flex more challenging that no support at all.
When there is no support you can put fall-back methods in place to replicate the layout to best effect.
But when a browser tries to support flex, but gets it wrong, it can be a real pain.
I say: do it right, or don’t do it at all IE!

1 Like

Exactly! Thing is, that IE 11 implemented older/initial versions of flex and grid before the modules were finalized.

@neil, Honestly I wouldn’t worry too much about IE 11 for your mobile version. Who’s going to be using that on a small screen mobile. Just give IE something that works for desktop if you really feel like you need to support it.

I feel like display:contents is now relatively safe to use for the majority of mobile devices.
Chrome’s support will cover Safari and IOS Safari and Chrome for Android.

After all it will only be needed for mobiles, so the fact that Edge has no support wouldn’t be an issue either.

3 Likes

That’s a good point. Although, I had a look at the caniuse for contents, it shows unsupported for “UC Browser for Android”, not even sure what that is, but apparently 7.1% are using it. I’ll have to think about this one!

Just a question to throw out there for @Ray.H and @SamA74, but I have a feeling I know the answer. Would doing .title { display: none; } be acceptable? Essentially having two titles in both areas, but toggle one on and the other off depending on the screen size?

I did just that for a banner image (background-image) a couple of years ago and it’s still working fine. While it’s never ideal to duplicate content, this occasion was too simple to pass up.

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