bootstrapで回り込みを制御するにはどうすればよいですか？

例えばもう少し画面を小さくした時に、右の青い枠を左の赤い枠の下に潜り込ませたいのですが、
どうしたら良いでしょうか？
floatのやり方しか分かりません。

<section class="mv">
  <div class="mv-content container">
    <div class="row">
      <div class="mv-left col-6">
      <div class="mv-right col-6"></div>
    </div>
  </div>
</section>

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  outline: none;
  font-family: 'Roboto', sans-serif;
}

.mv {
  background: #ABCDD6;
  min-height: auto;
}

.mv-content {
  max-width: 1140px;
}

.mv-left {
  width: 50%;
  padding-top: 20px;
  padding-left: 35px;
  border: 2px solid red;
}

.mv-right {
  border: 2px solid blue;
}

【追記の画像】
説明があまりよくない表現でした。
画面を小さくすると赤の要素の下に青の要素が来るようにするのが目的です。
お手数おかけして大変申し訳ありませんでした。
よろしければ引き続きご回答頂けると助かります。

行動規範の内容に同意します

回答1件

画面幅が991px以下のときに .mv-right を .mv-left の下に配置したい（縦1列にしたい）ということですね。
col-6 を col-lg-6 に変更してください。これだけです。

html
1<section class="mv">
2  <div class="mv-content container">
3    <div class="row">
4      <div class="mv-left col-lg-6"></div>
5      <div class="mv-right col-lg-6"></div>
6    </div>
7  </div>
8</section>

css
1
2

Bootstrap のレスポンシブ機能を十分理解できていないようなので、下記のリンク先等を参考に理解してください。

こうすれば理解できるBootstrap 4のレスポンシブWebデザインとそのCSS - Qiita

Bootstrap は CSS を使わなくてもレスポンシブ対応の基本的なレイアウトが設定できて、全体のデザインを統一したものにできる、という目的で開発されたものです。
基本的には、CSSは使いません。微調整やBootstrapではできないことを実現するときに最低限使用するようにすべきです。
margin padding もCSSを使わずに設定することができます。

【Bootstrap】の基本「マージン」と「パディング」

css
1* {
2/* 以下のコードはブラウザのデフォルトをリセットするためだと思われますが、
3   bootstrap自体、独自の Reset CSS を持っているので無駄だし、
4   仕様外の動作になる可能性があるので不必要 */
5/*  margin: 0;
6  padding: 0;
7  -webkit-box-sizing: border-box;
8          box-sizing: border-box;
9  outline: none; */
10  font-family: 'Roboto', sans-serif;
11}
12
13.mv {
14  background: #ABCDD6;
15  min-height: auto;
16}
17
18.mv-content {
19/*  max-width: 1140px; containerで設定されているので不要  */
20}
21
22.mv-left {
23/*  width: 50%; col-6 で設定しているので不要 */
24  padding-top: 20px;
25  padding-left: 35px;
26  border: 2px solid red;
27}
28
29.mv-right {
30  border: 2px solid blue;
31}
32

以下は「潜り込ませる」→「背面に配置する」という解釈で最初にした回答ですが、誤解だったようです。

ネガティブマージンとz-indexを使えばどうでしょうか。

css
1.mv-left {
2/*  width: 50%; col-6で設定されているので無駄 */
3  padding-top: 20px;
4  padding-left: 35px;
5  border: 2px solid red;
6  height: 200px;
7  z-index: 1; /* 前面へ移動 */
8}
9
10.mv-right {
11  border: 2px solid blue;
12  margin-left: -50px; /* 左へ50px移動 */
13}