这类似于这个问题here但略有不同。
我想在移动设备上重新排列三个 div,并在桌面设备上并排放置它们。请参阅所需结果的附件图片:
我在描述这个问题时遇到了很多麻烦,所以我希望这些图片对您有所帮助!
编辑: 这是一个通过复制代码工作的代码片段:
const Main = () => (
<section className="" id="section-2">
<div className="container">
<div className="row">
<div className="col-12 d-md-none">
<div className="text-center">
<span className="text-uppercase small-text small-text--lighter">step 2</span>
</div>
<div className="text-center">
<h2 className="text-center">HEADER 2</h2>
</div>
</div>
<div className="col-12 col-md-6">
<img alt="tbd" src="http://www.pixedelic.com/themes/geode/demo/wp-content/uploads/sites/4/2014/04/placeholder4.png" />
</div>
<div className="col-12 col-md-5 offset-md-1 text-center text-md-left">
<div className="d-flex flex-column justify-content-between align-items-center align-items-md-start">
<div className="d-none d-md-block">
<span className="text-uppercase small-text small-text--lighter">step 2</span>
</div>
<div className="d-none d-md-block">
<h2 className="">HEADER 2</h2>
</div>
<div>
<p>SOME PARAGRAPH TEXT</p>
</div>
</div>
</div>
</div>
</div>
</section>
)
ReactDOM.render(
<Main />,
document.getElementById("react")
);
img {
height: auto;
width: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
最佳答案
对于更大的宽度,您必须禁用 flexbox,因为 Bootstrap 4 的 flexbox 使列具有相同的高度。然后,使用 float ,使 B 和 C 列自然向右拉,因为 A 更高。 flexbox order-
将用于重新排序移动设备上的列...
A-B-C 桌面版,B-A-C 移动版
<div class="container-fluid">
<div class="row d-flex d-lg-block">
<div class="col-lg-6 order-1 float-left">
A
</div>
<div class="col-lg-6 order-0 float-left">
B
</div>
<div class="col-lg-6 order-1 float-left">
C
</div>
</div>
</div>
关于html - 一个高的 div 在桌面上紧挨着两个较短的 div,在移动设备上使用 Bootstrap 4 堆叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50141694/