Kevin Powell - Community•14mo ago

Change column order in mobile view

Hi, I'm a beginner and I'd like to swap around two columns in the mobile version of this page: https://expertphotoshop.ro/checkout/?add-to-cart=21190 Basically have the "please register" element up and the checklist down. How can I do that with CSS? Thank you! Chris.

Cristian Barin - Expert Photoshop - Cursuri Photoshop

Checkout - Cristian Barin - Expert Photoshop - Cursuri Photoshop

Ai acces nelimitat la urmatoarele cursuri:

9 Replies

snxxwyy•14mo ago

So if you’re using flex you can use flex-direction: column-reverse; or if you’re using grid you can change the order of an element using the order property

ChrisBarinOP•14mo ago

hmm ok I'm not sure, this was done by someone else I'm trying to learn

MarkBoots•14mo ago

o my, the layout is done with floats and a lot of percentages. not really modern standards But, I think for now that if you add these 2 lines inside the .new_checkout, it will do what you need.

.new_checkout {
    float: right;
    width: 100%;
    display: flex; /* this added */
    flex-wrap: wrap-reverse; /* this added */
    gap: 2rem;
}

.new_checkout {
    float: right;
    width: 100%;
    display: flex; /* this added */
    flex-wrap: wrap-reverse; /* this added */
    gap: 2rem;
}

ChrisBarinOP•14mo ago

roger, that's what I was trying to... yep lemme test didn't work

ChrisBarinOP•14mo ago

MarkBoots•14mo ago

in the mobile version it should

ChrisBarinOP•14mo ago

I was trying to change the % of .new_checkout_left { oh my bad yes! I haven't had my coffee. yes, it seems it's working you're awesome!

MarkBoots•14mo ago

i added a third line gap: 2rem to create some spacing

ChrisBarinOP•14mo ago

checking thank you! fantastic oh man, why is there so much inline css? anyway, that's for another time this is solved, thank you ❤️

Gaming

Programming

Change column order in mobile view