我在这里找到了使用 flexbox 的方法: Flexbox: reorder and stack columns
但是我不能将元素的整个结构更改为 flexbox,所以我想知道使用 bootstrap 4 是否可以这样做。
非常感谢。
我糟糕的考试。
@import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css' );
div {
text-align: center;
height: 60px;
}
#left {
background: yellow;
}
#middle {
background: blue;
}
#right {
background: coral;
}
<div class="container">
<div class="row">
<div class="col-sm-3 col-md-3">
<div id="left">COLUMN 1</div>
</div>
<div class="col-sm-6 col-md-6">
<div id="middle">COLUMN 2</div>
</div>
<div class="col-sm-3 col-md-3">
<div id="right">COLUMN 3</div>
</div>
</div>
</div>
最佳答案
您可以使用 Bootstrap 4(alpha 6)实用程序类来避免额外的 CSS。 1-2-3 在手机上变为 3-2-1。
<div class="container">
<div class="row">
<div class="col-sm-8 col-md-6 push-md-3">
<div id="middle">COLUMN 2</div>
</div>
<div class="col-sm-4 col-md-6">
<div class="row">
<div class="col-md-6 pull-md-12 flex-last flex-md-unordered">
<div id="left">COLUMN 1</div>
</div>
<div class="col-md-6">
<div id="right">COLUMN 3</div>
</div>
</div>
</div>
</div>
</div>
关于css - 使用 bootstrap 4 排序和堆叠 3 列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42705556/