移动端如何将图片置于文本上方？响应式布局调整求助

核心问题是你没把flex方向控制在正确的媒体查询里，且flex容器应该用直接包裹图片和文本的.container，而非外层的.inner-Event。按以下步骤修改即可解决：

1. 调整基础样式，设置正确的flex容器 #

将.container设为flex容器，让它负责图片与文本的排列逻辑：

.container {
  display: flex;
  align-items: center; /* 大屏幕下垂直居中对齐 */
  gap: 3vw; /* 大屏幕下图片和文本的间距，替代原有的margin-left */
  width: 100%;
  max-width: 80vw; /* 默认大屏幕宽度 */
}

.inner-Event {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

2. 媒体查询控制排列方向 #

在小屏幕（≤680px）时，给.container设置竖排布局，同时调整元素的宽度与margin：

@media only screen and (max-width: 680px) {
  .container {
    flex-direction: column; /* 竖排，图片自动居上 */
    gap: 2vh; /* 移动端图片和文本的上下间距 */
  }
  .imgContainerimg {
    width: 100%; /* 图片占满容器宽度 */
    margin: 0; /* 去掉原有左右margin，由容器控制居中 */
  }
  .twoContainer {
    max-width: 100%;
    margin: 0 10vw; /* 保留左右边距 */
  }
  .inner-Event {
    margin: 20vh 0 0 0; /* 保留你原有的移动端顶部margin */
  }
}

3. 整理大屏幕样式，避免冲突 #

调整大屏幕（>680px）的样式，利用flex特性优化布局：

@media only screen and (min-width: 681px) {
  .twoContainer {
    max-width: 25vw;
  }
  .imgContainer {
    flex-shrink: 0; /* 防止图片被压缩变形 */
  }
}

修改后的完整代码 #

<section class="inner-Event">
  <div class="container">
    <div class="imgContainer"> 
    {% if section.settings.image != blank %}
       <img src="{{ section.settings.image | img_url: '300x300'}}" alt="img" class="imgContainerimg"> 
       {% else %}
        {% capture current %}{% cycle 1,2 %}{% endcapture %}
        {{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg'}}
    {% endif %}
    </div>

    <div class="twoContainer">
        <div class="threeContainer">
            <div class="fourContainer">
                <h1>{{section.settings.title}}</h1>
                {{ section.settings.date_picker | date: "%d-%m-%Y" }}
                {{section.settings.description}}
                <a href="{{section.settings.button_link}}" class="#">{{section.settings.button_label}}</a>
            </div>
            
        </div>
    </div> 
  </div>

</section>

{% schema %}
{
    "name": "Event",
   "class": "Event",
  "settings": [
   {
        "type": "image_picker",
        "id": "image",
        "label": "event Image"
    },
    {
        "type": "text",
        "id": "title",
        "default": "exampleTitle",
        "label": "event Title"
    },
    {
    "type": "text",
    "id": "date_picker",
    "label": "Kies een Datum",
     "default": "01-01-2022",
     "info": "bijv. dd-mm-yyyy"
    },
    {
        "type": "richtext",
        "id": "description",
        "default": "<p>Example Paragraph</p>",
        "label": "event Description"
    },
    {
        "type": "text",
        "id": "button_label",
        "default": "Button",
        "label": "event Button Label"
    },
    {
        "type": "url",
        "id": "button_link",
        "label": "event Button Link"
    }
  ],
 "presets": [
    {
        "category": "hero",
        "name":"Events"
    }
 ]
}
{% endschema %}

<style>
  
.inner-Event {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.container {
  display: flex;
  align-items: center;
  gap: 3vw;
  width: 100%;
  max-width: 80vw;
}

/* 大屏幕样式（>680px） */
@media only screen and (min-width: 681px) {
  .twoContainer {
    max-width: 25vw;
  }
  .imgContainer {
    flex-shrink: 0;
  }
}

/* 移动端样式（≤680px） */
@media only screen and (max-width: 680px) {
  .container {
    flex-direction: column;
    gap: 2vh;
  }
  .imgContainerimg {
    width: 100%;
    margin: 0;
  }
  .twoContainer {
    max-width: 100%;
    margin: 0 10vw;
  }
  .inner-Event {
    margin: 20vh 0 0 0;
  }
}

/* 更大屏幕调整 */
@media only screen and (min-width: 1280px) {
  .container {
    max-width: 80vw;
    margin: 0 10vw;
  }
}  

@media only screen and (min-width: 2680px) {
  .container {
    max-width: 60vw;
    margin: 0 30vw;
  }
}  

</style>

关键说明 #

• 把flex容器移到.container，因为它是直接包含图片和文本的父元素，能精准控制两者排列
• flex-direction: column仅在max-width:680px的媒体查询中生效，大屏幕自动使用默认的row横向排列，不会出现竖排残留问题
• 用gap替代margin-left控制间距，更符合flex布局规范，避免margin带来的兼容性问题
• 整理了媒体查询断点，避免重复和样式覆盖

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