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
BenPleysier
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 😉

    BenPleysier
    BenPleysier
    Community Expert
    May 15, 2023

     

     

    <!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">
    <style>
        .row {
            display: flex;
            flex-direction: column;
            width: 100%;
            gap: 1em;
        }

        @media screen and (min-width: 761px) {
            .row {
                flex-direction: row;
            }

            span {
                flex-grow: 1;
            }

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

<body>
    <div class="row">
        <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!
      BenPleysier
      BenPleysierCorrect 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
        BenPleysier
        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