aswiseman Posted October 13, 2018 Share Posted October 13, 2018 I have been playing around with layouts and have used w3-cell-row / w3-cell. I have two columns, with text on the left and an image on the right. Sometimes, though, I want the image on the left and the text on the right, BUT for single-column display on mobiles, I want the text to still come first, above the image. So I tried this... the text comes first in the code, but I apply w3-right to its containing div and w3-left to the div of the image, so that on wider screens the text is on the right and the image is on the left... <div class="w3-cell-row" > <div class="w3-container w3-cell w3-mobile w3-purple w3-right" style="width: 60%"> <p>Text</p> </div> <div class="w3-container w3-cell w3-mobile w3-green w3-left w3-center w3-grey w3-cell-middle" style="width: 40%;"> <img class="w3-image" src="https://dummyimage.com/320x180/000/fff" width="320" height="180"> </div> </div> This works after a fashion, but I lose the cells being the same height. Is there an official / neater / cleverer way of achieving what I want? Link to comment Share on other sites More sharing options...
dsonesuk Posted October 13, 2018 Share Posted October 13, 2018 (edited) With display: flex; you can do a column-reverse or row-reverse, while maintaining equal height between the two columns. https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_direction_row-reverse Edited October 13, 2018 by dsonesuk 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now