移动端页面无法实现响应式布局求助：需图片在上文字在下

Hey there! Let's get your mobile layout sorted out. Since you're new to HTML and CSS, I'll break this down into simple, actionable steps using basic flexbox—it's perfect for this kind of layout adjustment.

First, your original code already has the critical <meta name="viewport"> tag, which is a great foundation—without that, mobile browsers won't scale your page correctly. Now we just need to add some CSS to rearrange the content for smaller screens.

Here's the modified complete code that will give you the mobile layout you want (image above, neatly stacked text below), plus a clean desktop layout too:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home</title>
    <style>
        /* Base styles for all screens */
        .content-container {
            display: flex;
            gap: 20px; /* Adds space between image and text */
            padding: 20px;
            max-width: 1200px;
            margin: 0 auto; /* Centers the container on desktop */
        }

        .responsive-image {
            max-width: 100%;
            height: auto; /* Keeps image proportions intact */
            flex-shrink: 0; /* Prevents image from shrinking too much on desktop */
            width: 400px; /* Fixed width for desktop, adjusts on mobile */
        }

        .text-content {
            flex: 1; /* Lets text take remaining space on desktop */
            line-height: 1.6; /* Makes text easier to read */
        }

        /* Media query for mobile screens (under 768px wide) */
        @media (max-width: 768px) {
            .content-container {
                flex-direction: column; /* Stacks items vertically */
            }

            .responsive-image {
                width: 100%; /* Image takes full width on mobile */
            }
        }
    </style>
</head>
<body>
    <div class="content-container">
        <img src="your-image-url.jpg" alt="Description of your image" class="responsive-image">
        <div class="text-content">
            <p>Your first text paragraph here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <p>Your second text paragraph here. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            <p>More text as needed! Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
        </div>
    </div>
</body>
</html>

Let's break down what each part does: #

• .content-container: Uses flexbox to arrange the image and text side-by-side on larger screens. The gap adds space between them so they don't feel cramped.
• .responsive-image: max-width: 100% ensures the image never overflows its container, and height: auto keeps it from getting stretched out of shape.
• Media Query (@media (max-width: 768px) ): This is the magic for responsiveness! When the screen is smaller than 768px (most mobile phones), it changes the flex direction to column, which stacks the image above the text. We also make the image take full width on mobile for a clean look.
• .text-content: On desktop, flex:1 makes the text fill the remaining space next to the image, and line-height:1.6 improves readability on all screens.

Just replace your-image-url.jpg with your actual image path, and swap out the sample text with your content. This should work perfectly for your needs—no fancy tools or extra skills required!

内容的提问来源于stack exchange，提问作者Kat