レスポンシブで画像をうまく周り混ませるにはどうすれば良いですか？

Question

左が人型の画像で、右が文章が描いてあるボックスです。
PC画面では、①のようなレイアウトで、
画面を縮めて行くと、ボックスが人型の上に来るようにしたいと思っています。
人型の下の部分は常にsectionの最下部にくっついてるようにしたいです。

position:absolute;
left:0px;
bottom:0px;

でだと、人型が常に下にくっつくような感じが出来るのですが、ボックスが人型の上に表示されてしまいます。
どのようにしたらうまく行きますか？

.trouble {
  padding-top: 50px;
  min-height: auto;
  background-color: #3490DC;
}

.trouble-wrap {
  max-width: 1140px;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
}

.trouble-wrap-neko img {
  max-width: 500px;
  height: auto;
  position: absolute;
  bottom: 0px;
  left: 0px;
}

.trouble-wrap-list {
  padding-left: 20px;
}

.trouble-wrap-list ul {
  list-style: none;
}

.trouble-wrap-list ul li {
  color: white;
  font-size: 32px;
  font-weight: bold;
  border-bottom: 3px solid white;
  padding-top: 10px;
}

<div class="trouble-wrap">
    <div class="trouble-wrap-neko">
      <img src="neko.png" alt="猫画像">
    </div>
    <div class="trouble-wrap-list">
      <ul>
        <li><i class="fas fa-check-square"></i> あああああああ</li>
       　<li><i class="fas fa-check-square"></i> あああああああ</li>
        <li><i class="fas fa-check-square"></i> あああああああ</li>
        <li><i class="fas fa-check-square"></i> あああああああ</li>
        <li><i class="fas fa-check-square"></i> あああああああ</li>
      </ul>
    </div>
  </div>

Answer 1

position: absolute; は削除して、フレックスコンテナ(親要素)に flex-wrap: wrap-reverse; を設定すればいいでしょう。

.trouble-wrap {
  max-width: 1140px;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap-reverse; /* 追加 */
 /* position: relative;*/
}

.trouble-wrap-neko img {
  max-width: 500px;
  height: auto;
/*  position: absolute;
  bottom: 0px;
  left: 0px;*/
}

コメントについての追記

コメントより

接触してある程度の幅までは、人型が縮んで、ある程度のところまでいったら、回り込みをする、と言った感じの動きにするにはどうしたらよいですか？

画像幅は最大500px、画面幅を狭くなるにつれて画像は300pxまでは縮小して、それ以上狭くなると回り込みするという設定にするとして、上記の回答の修正に加えて、下記の修正をすればいいでしょう。

.trouble-wrap {
  max-width: 1140px;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
/*　以下追加 */
.trouble-wrap-neko {
  max-width: 500px;
  flex: 1 1 300px;
}
/* ここまで */
.trouble-wrap-neko img {
  max-width: 100%;  /* 修正 */
  height: auto;
}

コメントについての追記2

コメントより

デザイン的に画像の下はsectionのbottomとくっついてるような感じにしたいのですが、どうしたら出来ますか？

上記の回答の修正に加えて、下記のコードをすればいいでしょう。

.trouble-wrap-neko {
  max-width: 500px;
  flex: 1 1 250px;
  display: flex; /* 追加 */
  align-items:flex-end; /* 追加 */
}

Comments

[takawork]

ありがとうございます。うまく回り込みが出来たのですが、幅を徐々に縮ませて2つの要素がぶつかった瞬間に回り込みするようになったのですが、接触してある程度の幅までは、人型が縮んで、ある程度のところまでいったら、回り込みをする、と言った感じの動きにするにはどうしたらよいですか？

[takawork]

追記ありがとうございます。その設定だと、画像が縮むようにはなったのですが、画像の大きさが縮むに連れて、画像の下に空白が出来てしまいます。デザイン的に画像の下はsectionのbottomとくっついてるような感じにしたいのですが、どうしたら出来ますか？

[hatena19]

解答に追記しましたのでご参照ください。

[takawork]

ありがとうございます。うまくいきました！

Answer 2

positionではなくdisplay:flexを使ってはいかがでしょうか？

.trouble-wrap{
 display: flex;
}

@media screen and (max-width: 750px){
.trouble-wrap{
 flex-direction: column-reverse;
}
}

※750px以下の環境で②のレイアウトにする設定です。max-width部分は適宜変更してください。