Kevin Powell - Community•8mo 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•8mo 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

ChrisBarin•8mo ago

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

MarkBoots•8mo 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;
}

ChrisBarin•8mo ago

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

ChrisBarin•8mo ago

MarkBoots•8mo ago

in the mobile version it should

ChrisBarin•8mo 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•8mo ago

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

ChrisBarin•8mo 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