helloluci Posted July 3, 2020 Share Posted July 3, 2020 Site URL: https://helloluci.com/helloluciblog/self-care-during-quarantine Hi All! I'm working on some blog post that interview people, and I current have the desktop view set up as 'image right, text left' then 'text right, image left' on the next line, and so on. In mobile view, I'd like for the images to stack on top of the quotes. I have tried the following CSS which was given to me by a more advanced user, but it didn't work. I'm not really sure where to go from there. I've linked the blog post for reference! @media screen and (max-width: 640px) { .Main-content .code-block + .sqs-row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } } Thank you! Link to comment
rwp Posted July 4, 2020 Share Posted July 4, 2020 (edited) I don't think you can do it with just CSS, will need to use both CSS and jQuery because the column divs have no class or fixed ID's. What you did above would flip all of them (even the ones that were originally oriented correctly). @media screen and (max-width: 640px) { .Main-content .row.sqs-row { display: flex; flex-direction: column; } } $('div.image-block').parent().attr('style','order:-1'); Edited July 4, 2020 by rwp Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment