simona6 Posted May 19 Share Posted May 19 I have a row of 2 columns. Left is an image, right is text. The image is cropped at the bottom, so when it gets to the width of a smaller device, I want to swap them over, so that they go 1/1 on each col, and the image is under the text. I tried Flex, but that forces it to be 50/50 width. I'm sure in CSS it is easy, but can't figure it out. Hope someone can help. I have tried this: @media only screen and (max-width: 950px) { #flex { display: flex!important; flex-flow: column!important; } #flex .grve-row { display: flex!important;} #left { order: 1!important; } #right { order: 2!important; } } Quote Link to comment Share on other sites More sharing options...
requinix Posted May 20 Share Posted May 20 5 hours ago, simona6 said: I tried Flex, but that forces it to be 50/50 width. You can, of course, change that. Quote Link to comment Share on other sites More sharing options...
Solution Danishhafeez Posted May 29 Solution Share Posted May 29 To achieve the desired layout where the image and text columns switch order on smaller screens, you can use CSS Flexbox with media queries. The key is to set the flex direction to column and change the order of the elements within the media query. <div id="flex"> <div id="left"> <img src="image.jpg" alt="Image"> </div> <div id="right"> <p>Your text goes here.</p> </div> </div> Default Styles for Larger Screens: By default, the elements will be displayed side by side (e.g., using Flexbox or Grid). #flex { display: flex; } #left, #right { flex: 1; /* or you can use a specific width like flex: 0 0 50%; */ } #left { order: 1; } #right { order: 2; } Use a media query to change the flex direction to column and adjust the order of the elements. @media only screen and (max-width: 950px) { #flex { display: flex; flex-direction: column; } #left { order: 2; } #right { order: 1; } } display: flex;: Ensures that the parent container uses Flexbox. flex-direction: column;: Stacks the child elements vertically instead of horizontally. order: Adjusts the order of elements. Lower values appear first. In the media query, setting #left to order: 2 and #right to order: 1 swaps their positions. here is complete example: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Responsive Layout</title> <style> /* Default Styles for Larger Screens */ #flex { display: flex; } #left, #right { flex: 1; } #left { order: 1; } #right { order: 2; } /* Styles for Smaller Screens */ @media only screen and (max-width: 950px) { #flex { display: flex; flex-direction: column; } #left { order: 2; } #right { order: 1; } } </style> </head> <body> <div id="flex"> <div id="left"> <img src="image.jpg" alt="Image" style="width: 100%;"> </div> <div id="right"> <p>Your text goes here.</p> </div> </div> </body> </html> Best Regard Danish Hafeez | QA Assistant ICTInnovations Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.