How do I change the order of DIVS on small devices?

simona6 · 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; }
}

requinix · 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.

Danishhafeez · 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

Sign In

How do I change the order of DIVS on small devices?

Recommended Posts

simona6

Link to comment

Share on other sites

requinix

Link to comment

Share on other sites

Danishhafeez

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information