Bootstrapの改行されたcolを上に詰めたい

Question

現在Bootstrapを用いてLPを制作しているのですが、以下のような解決できない部分が現れたので、教えていただきたいです。

##解決したいこと
下記画像の左下に表示されている画像を右側に表示されているDecorationの画像の下に少しかぶるくらいの高さまで持っていきたい

以下の画像が理想としているものです。

##該当部分のコード
該当部分ではbootstrapのcol-md-5を用いで幅を指定し、２列にならんだcolをjustify-content: space-between;で両端に寄せています。

                <div class="work-inner row">
                    <div class="gift col-md-5">
                        <img src="img/work_gift.png" alt="">
                        <h3>Gift</h3>
                        <p>花束をお送りしたいお相手、伝えたいお気持ちに合わせたプレゼント用花束のアレンジメントをさせていただきます。花言葉などの豆知識もお伝えします。</p>
                    </div>
                    <div class="decoration col-md-5 right">
                        <img src="img/work_decoretion.png" alt="">
                        <h3>Decoration</h3>
                        <p>お写真を彩るお花を一輪から販売。一定期間のご契約で定期的にご自宅へ配送させていただくことも可能です。</p>
                    </div>
                    <div class="wedding col-md-5">
                        <img src="img/work_wedding.png" alt="">
                        <h3>Wedding</h3>
                        <p>ウエディングドレスに合わせたブーケや式場の雰囲気に合う装花をご提案。お打ち合わせの流れや回数、費用などにつきましてはお問い合わせください。</p>
                    </div>
                    <div class="foryourself col-md-5 right">
                        <img src="img/work_for_yourself.png" alt="">
                        <h3>For yourself</h3>
                        <p>花束をお送りしたいお相手、伝えたいお気持ちに合わせたプレゼント用花束のアレンジメントをさせていただきます。花言葉などの豆知識もお伝えします。</p>
                    </div>
                </div>
            

.work-inner{
    width: 100%;
    justify-content: space-between;
    position: relative;
}
.work-inner img{
    width: 100%;
}
.work-inner .gift{
    height: 560px;
}
.work-inner .gift,
.work-inner .decoration,
.work-inner .wedding,
.work-inner .foryourself{
    padding: 0;
    text-align: center;
}
.work-inner .right{
    margin-top: 120px;
}

右側の列の画像や文章は、margin-topをかけてずらしています。

##試したこと
chromeのデベロッパーツールでみてみたところ、decorationのdivの一番したの部分と、該当の上に詰めたい画像の一番上の部分が同じ高さに並んでいました。
個人的に、colは改行されると上に詰められるものだと思っていたのですが、右側の列にかけたmarginの分だけ下に下がってしまいました。

該当の画像に対し、padding-topを指定したり、margin-topを指定してももちろんダメでした。

position: absolute;でtopを指定したら、デザインがいろいろなところで崩れてしまったので、なるべくpositionを使わずに画像を上に詰めたいです。

回答お待ちしております。

Answer 1

ナイーブには .wedding クラスの適用された要素へ**ネガティブマージン**を適用することで解決出来ます (動作確認用リンク)。

<div class="work-inner row">
  <div class="gift col-md-5">
    <img src="http://placehold.jp/420x420.png" alt="">
    <h3>Gift</h3>
    <p>花束をお送りしたいお相手、伝えたいお気持ちに合わせたプレゼント用花束のアレンジメントをさせていただきます。花言葉などの豆知識もお伝えします。</p>
  </div>
  <div class="decoration col-md-5 right">
    <img src="http://placehold.jp/420x630.png" alt="">
    <h3>Decoration</h3>
    <p>お写真を彩るお花を一輪から販売。一定期間のご契約で定期的にご自宅へ配送させていただくことも可能です。</p>
  </div>
  <div class="wedding col-md-5">
    <img src="http://placehold.jp/420x630.png" alt="">
    <h3>Wedding</h3>
    <p>ウエディングドレスに合わせたブーケや式場の雰囲気に合う装花をご提案。お打ち合わせの流れや回数、費用などにつきましてはお問い合わせください。</p>
  </div>
  <div class="foryourself col-md-5 right">
    <img src="http://placehold.jp/420x411.png" alt="">
    <h3>For yourself</h3>
    <p>花束をお送りしたいお相手、伝えたいお気持ちに合わせたプレゼント用花束のアレンジメントをさせていただきます。花言葉などの豆知識もお伝えします。</p>
  </div>
</div>

.work-inner{
    width: 100%;
    justify-content: space-between;
    position: relative;
}
.work-inner img{
    width: 100%;
}
.work-inner .gift{
    height: 560px;
}
.work-inner .gift,
.work-inner .decoration,
.work-inner .wedding,
.work-inner .foryourself{
    padding: 0;
    text-align: center;
}
.work-inner .right{
    margin-top: 120px;
}

.wedding {
  margin-top: -20vw;
}

しかし、そういった配置を行う手段としては、恐らく grid システムよりも cards レイアウトのほうが適しています (動作確認用リンク)。

<div class="wrap card-columns">
  <div class="card">
    <img src="http://placehold.jp/420x420.png" alt="" class="card-img-top">
    <div class="card-body">
      <h3 class="card-title">Gift</h3>
      <p class="card-text">花束をお送りしたいお相手、伝えたいお気持ちに合わせたプレゼント用花束のアレンジメントをさせていただきます。花言葉などの豆知識もお伝えします。</p>
    </div>
  </div>
  <div class="card">
    <img src="http://placehold.jp/420x630.png" alt="" class="card-img-top">
    <div class="card-body">
      <h3 class="card-text">Decoration</h3>
      <p class="card-text">お写真を彩るお花を一輪から販売。一定期間のご契約で定期的にご自宅へ配送させていただくことも可能です。</p>
    </div>
  </div>
  <div class="card">
    <img src="http://placehold.jp/420x630.png" alt="" class="card-img-top">
    <div class="card-body">
      <h3 class="card-title">Wedding</h3>
      <p class="card-text">ウエディングドレスに合わせたブーケや式場の雰囲気に合う装花をご提案。お打ち合わせの流れや回数、費用などにつきましてはお問い合わせください。</p>
    </div>
  </div>
  <div class="card">
    <img src="http://placehold.jp/420x411.png" alt="" class="card-img-top">
    <div class="card-body">
      <h3 class="card-title">For yourself</h3>
      <p class="card-text">花束をお送りしたいお相手、伝えたいお気持ちに合わせたプレゼント用花束のアレンジメントをさせていただきます。花言葉などの豆知識もお伝えします。</p>
    </div>
  </div>
</div>

.card-columns {
  column-count: 2 !important;
}