Требование
, когда screen size > 992px, с левой стороны, выглядит как dropdown test1, за которым следует dropdown test2.
, когда screen size > 992px, с правой стороны, выглядит как text list, за которым следует image.
, когда screen size <= 992px, реальная сетка: dropdown test1, затем dropdown test2, затем text list и image Если вы закомментируете класс, например bgColorLeft, вы увидите реальные столбцы
text list может быть коротким или длинным, поэтому фиксированная высота не идеальна.
То, что я сделал
- Я сделал это сеткой 2x2.
- Я использую класс
marginTop: -9rem, чтобы сделать dropdown test1, а затем dropdown test2
Выглядеть как левый и правый столбцы 
Фактически это 2x2 сетка 
Проблема
- Когда я изменяю размер экрана, прежде чем все превратится в один столбец. Я вижу, что
dropdown test2 перемещается вверх и вниз. - Установите фиксированную высоту для
test list Кажется, остановка dropdown test2 движется вверх и вниз, но высота test list является динамической c.
Код ниже
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous"
/>
<title>Hello, world!</title>
<style>
.bgColorLeft {
/*background-color: blueviolet;*/
}
.bgColorRight {
/*background-color: burlywood;*/
}
.bgColorLeft1 {
/*background-color: gray;*/
}
.bgColorRight1 {
/*background-color: olivedrab;*/
}
.fixedHeight {
height: 200px;
}
.marginTop {
margin-top: -9rem;
}
@media (max-width: 992px) {
.marginTop {
margin-top: 0;
}
}
</style>
</head>
<body>
<div>
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-6 col-xl-6 bgColorLeft">
<select>
<option>test1</option>
</select>
</div>
<div class="col-sm-12 col-md-12 col-lg-6 col-xl-6 bgColorRight">
<!--<div class="fixedHeight">-->
<h4>test mesd dfjsdf dsfdsfdsf sdfdsfdsf sdfdsfd s</h4>
<ul>
<li>
simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever
since the 1500s, when an unknown printer took a galle
</li>
<li>
simply dummy text of the printing and typesetting industry.
Lorem Ipsum
</li>
<!--<li>
More text to make it height different simply dummy text of the
printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s, when an
unknown printer took a galle
</li>-->
</ul>
<!--</div>-->
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-6 col-xl-6 bgColorLeft1">
<div class="marginTop">
<select>
<option>test2</option>
</select>
</div>
</div>
<div class="col-sm-12 col-md-12 col-lg-6 col-xl-6 bgColorRight1">
<h4>my img</h4>
<img src="https://via.placeholder.com/350x350" />
</div>
</div>
</div>
</div>
</body>
</html>