使用 Bootstrap 是否可以根据视口(viewport)拥有这些不同的布局?我一直在搜索这个,我知道推、拉的概念,我也在使用相同的东西,但我有一些不同的要求,我无法想出如何去做。
下面是我的 Bootstrap 代码以及预期和实际输出。我无法获得预期的输出。有人可以帮我弄这个吗。 Explanation 预期的 在移动设备上(堆叠) C A 丁 乙 E
在桌面上(应该堆叠 CDE) A B C 丁 E
实际 在移动设备上(堆叠) A 乙 C 丁 乙 在桌面上 (CDE) A B C 丁 E
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-sm-2">
<div class="well" id="first" style="background-color:red;">
A - Image
</div>
</div>
<div class="col-sm-4">
<div class="well" id="second" style="background-color:pink">
B - Thumb
</div>
</div>
<div class="col-sm-6">
<div class="heading">
<h2 runat="server" class="product_title" id="productoverviewTitle"></h2>
<p class="sub-heading">
<div class="well" id="third" style="background-color:green">
C
</div>
</p>
</div>
<div class="content">
<div class="panel entry-content">
<div class="well" id="fourth" style="background-color:orange">
D
</div>
</div>
</div>
<div class="where-to-buy">
<div class="well" style="background-color:lightblue">
E
</div>
</div>
</div>
</div>
</div>
图像附在这个主题中。
最佳答案
能够在媒体查询中使用flexbox
很难重新排列嵌套的列。 先不说难,不推荐。
@media only screen and (max-width: 768px) {
.row {
display: flex;
flex-direction: column;
}
#a {
order: 4;
}
#b {
order: 2;
}
#c {
order: 1;
}
#d {
order: 3;
}
#e {
order: 5;
}
}
@media only screen and (min-width: 768px) {
#d {
bottom: 220px;
}
#e {
bottom: 220px;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-sm-2" id="a">
<div class="well" style="background-color:red; min-height:300px;">
A - Image
</div>
</div>
<div class="col-sm-4" id="b">
<div class="well" style="background-color:pink">
B - Thumb
</div>
</div>
<div class="col-sm-6" id="c">
<div class="heading">
<h2 runat="server" class="product_title" id="productoverviewTitle"></h2>
<p class="sub-heading">
<div class="well" style="background-color:green">
C
</div>
</p>
</div>
</div>
<div class="col-sm-6 col-sm-offset-6" id="d">
<div class="content">
<div class="panel entry-content">
<div class="well" style="background-color:orange">
D
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-sm-offset-6" id="e">
<div class="where-to-buy">
<div class="well" style="background-color:lightblue">
E
</div>
</div>
</div>
</div>
</div>
关于css - 更改移动布局上的 Bootstrap 列/行顺序?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47914247/