要素の重なりを無くしたい

Question

前提・実現したいこと

Bootstrapのグリッドシステムを用いています。
レスポンシブで、__一つ目と３つ目のrow要素のテキストと画像を逆に表示させるため__にflexのorderを使いたいのですが、その過程で生じる.row要素の重なりを無くしたいです。

発生している問題・試したこと

• 順を逆にしたい親要素.rowにdisplay:flex;を入れた時点で、.row要素それぞれ三つがずれた状態で重なって表示されてしまいます。

• Bootstrap4の.flex-sm-column-reverseを.rowそれぞれにはめ込んでみましたが、画像とテキストは横並びに表示されました。

• chromeのdeveloper toolでcssを一つずつチェックボックスを外したり他の指定を加えたりなどしました。

該当のソースコード

上からHTML、CSSです。
クラス名が多くて見にくいかと思いますが、何かアドバイスなど頂けますと幸いです。
よろしくお願い致します。

	<div class="ly-promo">
		<div class="row ly-promo-grid ly-athome">
			<div class="col-md-5 ly-img-athome ly-img-grid">
				<img src="画像">
			</div>
			<div class="col-md-7 ly-text-athome ly-text-grid">
				<div class="el-text-centering">
					<h2 class="grid-title">アットホーム</h2>
					<p class="grid-summary">それぞれにあった家を探そう</p>
					<a href="#" class="a_with_arrow">登録</a>
				</div>
			</div>
		</div>
		<div class="row ly-promo-grid ly-team_building">
			<div class="col-md-7 ly-text-grid ly-text-team_building">
				<div class="el-text-centering">
					<h2 class="grid-title">チーム</h2>
					<p class="grid-summary">チームで協力</p>
					<a href="#" class="a_with_arrow" >登録</a>
				</div>
			</div>
			<div class="col-md-5 ly-img-grid ly-img-team_building ">
				<img src="画像２">
			</div>
		</div>
		<div class="row ly-promo-grid ly-creativity ">
			<div class="col-md-5 ly-img-grid ly-img-creativity">
				<img src="画像３">
			</div>
			<div class="col-md-7 ly-text-grid ly-text-creativity">
				<div class="el-text-centering">
					<h2 class="grid-title">創造力をかきたてる</h2>
					<p class="grid-summary">ひらめき</p>
					<a href="#" class="a_with_arrow">登録</a>
				</div>
			</div>
		</div>
	</div>



/*.ly-athome ~ .ly-creativity
---------------------------*/
.ly-promo{
	margin-left:30px;
}

.ly-promo-grid{
	height:500px;
	width:100%;
	margin-top:13px;
}

.ly-promo-grid .col-md-5{
	padding-left:0;
}

.ly-img-grid img{
	object-fit:cover;
	height:500px;
}

.ly-team_building .col-md-5{
	padding-right:0;
}

.ly-img-team_building img{
	width:100%;
	padding-left:13px;
}

.ly-img-creativity{
	padding-left:0
}

.ly-text-grid{
	position:relative;
	background-color:#ebebeb;
}

.ly-text-team_building{
	background-color:#006c70;
}

.el-text-centering{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}

.grid-title,
.grid-summary{
	color:#484848;
}

.ly-text-team_building h2,
.ly-text-team_building p{
	color:#fff;
}

.grid-title{
	font-size:32px;
}

.grid-summary{
	font-size:18px;
	-webkit-font-smoothing:antialiased;
	font-smoothing:antialiased;
}

.a_with_arrow{
	font-size:16px;
	-webkit-font-smoothing:antialiased;
	font-smoothing:antialiased;
}

/*スマホ版(.ly-athome ~ .ly-creativity)
---------------------------*/
@media(max-width:760px){
	.ly-promo{
		margin:0;
	}


	.ly-promo .row{
		display:flex;
	}

	.ly-promo-grid{
		height:380px;
	}

	.ly-promo-grid .col-md-5{
		width:100%;
		padding-left:15px;
	}


	.ly-text-grid{
		height:192px;
	}



	.el-text-centering{
		width:80%;
	}


	.ly-img-athome,
	.ly-img-creativity{
		margin-bottom:20px;
	}

	.ly-text-athome,
	.ly-text-creativity{
		order:-1;
	}

	.ly-text-team_building{
		height:276px;
	}

	.ly-img-team_building img{
		padding-left:0;
		margin-top:20px;
	}

	.ly-team_building .col-md-5{
		padding-right:13px;
	}

	.grid-title{
		font-size:24px;
	}

	.grid-summary{
		font-size:14px;
	}
}

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[kei344]

質問タグの「Flex」はCSSのFlexboxと関係がないのではずして置いてください。

Answer 1

.row要素(.ly-promo-grid)の高さを380px に設定しているのに、
テキスト要素(.ly-text-grid) の高さに 192px、
画像の高さに 500px を設定しているので、
(500px+192px)-380px 分はみ出ているので、その分か重なっています。

.row要素(.ly-promo-grid)の高さを380pxにしたいなら、画像の高さを収まるように小さくしましょう。
例えば、380px - 192px = 188px なので、

.ly-img-grid img{
  object-fit:cover;
  width: 100%;
  height:188px;
}

Comments

[nkira]

そこが問題だったということに全く気づけませんでした。。
ご回答いただきありがとうございました！