Skip to main content
U
Under S.
Inspiring
May 15, 2023
Answered

(CSS) Reversing the order of Grid elements

  • May 15, 2023
  • 2 replies
  • 36034 views

The following code will turn a two-column grid layout into a single-column one when viewport width falls under 760px :

 

.grid {
display: grid;
width: 100%;
grid-template-columns: 50% 50%;
grid-column-gap: 1em;
grid-row-gap: 1em;
}
.grid span { width:100% }
@media screen and (max-width: 760px)
.grid { grid-template-columns: 100% }
}

 

<div class="grid">
<span>Hi</span>
<span>Bye</span>
</div>

 

What's the least amount of code required to flip the order of "Hi" and "Bye" when the page switches to a single-column layout (ie, < 760px)? No need to worry about where a 3rd element would fall, it should always just be 2.

 

Ideally, I'd like to do this using existing selectors like :first-child (perhaps making it float:right on the resize would make it appear last) but if that's too much of an ask, I'd be open to assigning an ID to one or both of the spans. I'm also told Flexbox will reverse order easily without requiring ID tags; but if Grid does it too, I'd rather stick with that since I'm already using it.

 

Thanks!

This topic has been closed for replies.
Correct answer BenPleysier

Add

.grid {
    display: grid;
    width: 100%;
    grid-template-columns: 50% 50%;
    grid-column-gap: 1em;
    grid-row-gap: 1em;
}

.grid span {
    width: 100%
}

@media screen and (max-width: 760px) {
    .grid {
        grid-template-columns: 100%
    }

    span:first-child {
        order: 2;
    }
}
 

2 replies

BenPleysier
Community Expert
BenPleysierCommunity Expert
Community Expert
May 15, 2023

Think even further, Why are you using CSS Grid?

 

You are targeting a single dimensional element. You should therefore use a 1D function such as Flexbox. CSS Grid is a 2D function.

 

See 

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    U
    Under S.Author
    Inspiring
    May 15, 2023

    I've been more-or-less using Grid as a replacement for Table (since there's so much less markup required) and am far less familiar with Flexbox. Could you show me what the Flexbox code would look like in this context? For whatever reason, I tend to pick things up faster reverse-engineering them. If it turns out the same can be achieved with as little code as Grid, I may start harnessing the unbridled power of Flexboxes more often 😉

    U
    Under S.Author
    Inspiring
    May 15, 2023
    quote

    I've been more-or-less using Grid as a replacement for Table (since there's so much less markup required) and am far less familiar with Flexbox. Could you show me what the Flexbox code would look like in this context? For whatever reason, I tend to pick things up faster reverse-engineering them. If it turns out the same can be achieved with as little code as Grid, I may start harnessing the unbridled power of Flexboxes more often 😉


    By @Under S.

     

    Flexbox is much simpler than grid. Grid is more powerful but more complex to learn. If you already have gotten your head around Grid then Flexbox is going to be a walk in the park for you to understand and implement.

     


    I have an old iPad that's stuck at an obsolete iOS version, meaning I can no longer update any apps, including the browsers. I figure I'm probably not the only one who doesn't update his tech regularly, so I've been using this iPad as a "if it works there, it'll work everywhere that matters" gauge. Which is why I no longer use aspect-ratio without the padding hack as a fallback, for example (my iPad won't render aspect-ratio).

     

    Is it safe to assume this (older) iPad will have less trouble with Grid than Flexbox? Based on what you're telling me, that might be the only reason to keep with Grid (my presumption that Grid was adopted before Flexbox).

    BenPleysier
    Community Expert
    BenPleysierCommunity ExpertCorrect answer
    Community Expert
    May 15, 2023

    Add

    .grid {
        display: grid;
        width: 100%;
        grid-template-columns: 50% 50%;
        grid-column-gap: 1em;
        grid-row-gap: 1em;
    }

    .grid span {
        width: 100%
    }

    @media screen and (max-width: 760px) {
        .grid {
            grid-template-columns: 100%
        }

        span:first-child {
            order: 2;
        }
    }
     
    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
      BenPleysier
      Community Expert
      BenPleysierCommunity Expert
      Community Expert
      May 15, 2023

      Actually I would code for mobile first for obvious reasons. The markup would look like 

      <!doctype html>
<html>

<head>
    <base href="/">
    <meta charset="UTF-8">
    <title>Untitled Document</title>

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/css/style.css" />
    <style>
        .grid {
            display: grid;
            width: 100%;
            grid-template-columns: 100% grid-column-gap: 1em;
            grid-row-gap: 1em;
        }


        .grid span {
            width: 100%
        }

        @media screen and (min-width: 761px) {
            .grid {
                grid-template-columns: 50% 50%;
            }

            span:first-child {
                order: 2;
            }
        }
    </style>
</head>

<body>
    <div class="grid">
        <span>Bye</span>
        <span>Hi</span>
    </div>
</body>

</html>
      Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
      U
      Under S.Author
      Inspiring
      May 15, 2023

      Just curious, why code for mobile first? (I'm just more comfortable coding for PCs first.) What's the advantage to doing it the other way?

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices