Jump to content

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


simona6
Go to solution Solved by Danishhafeez,

Recommended Posts

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

 

Link to comment
Share on other sites

  • 2 weeks later...
  • Solution

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.