刚去掉弯曲方向：柱;和浮子：右;你已经使用的Flex Package ，所以它将在小屏幕上 Package ，你不需要p标签确定我使用了Flex反向和添加Flex 1到第二个div

.flex-container {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  width: 80%;
  margin: auto;
  background: #f2f2f2;
  padding: 0px 25px;
  box-shadow: 0.1rem 0.1rem 0.2rem 0 rgb(0 0 0 / 40%);
  font-size: 1.125rem;
  min-height: 375px;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(127, 127, 127, 1);
}

.flex-item2{flex:1;}

<div class="flex-container">
  <div class="flex-item1">
    <img src="https://th.bing.com/th/id/OIP.6QVXHtV8VbGGXMF5RDWWNwAAAA?pid=ImgDet&w=373&h=560&rs=1" >
  </div>
  <div class="flex-item2">
    <h2>Test</h2>
    <ul>
      <li>Test1</li>
      <li>Test2</li>
      <li>Test3</li>
      <li>Test4</li>
      <li>Test5</li>
    </ul>
  </div>
</div>

我已经在这个JSfiddle中尝试了你的代码。当你移动中间的滑块时，它确实可以响应。你有一些内嵌的CSS，我删除了它，它看起来工作得很好。也许是容器的宽度有问题，这导致只有当视口小得多时，响应才能工作。注意：我用了一张随机的网上图片
编辑：也要注意，如果你想改变项目的顺序，只需改变它们在HTML中的位置，因为这将是最简单的
超文本标记语言

<div class="flex-container">
  <div class="flex-item1">
    <p><img src="https://www.shutterstock.com/image-vector/short-custom-urls-url-shortener-600w-2233924609.jpg"></p>
  </div>

  <div class="flex-item2">
    <h2>Test</h2>

    <ul>
      <li>Test1</li>

      <li>Test2</li>

      <li>Test3</li>

      <li>Test4</li>

      <li>Test5</li>
    </ul>
  </div>
</div>

中央支助系统

.flex-container {

display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 80%;
    margin: auto;
background: #f2f2f2;
    padding: 0px 25px;
    box-shadow: 0.1rem 0.1rem 0.2rem 0 rgb(0 0 0 / 40%);
    font-size: 1.125rem;
    min-height: 375px;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(127, 127, 127, 1);
}

img{
  max-height:200px;
}