HTML:
<div class="container">
<div class="row">
<div id="a" class="col-md-7 col-sm-12 col-xs-12">A</div>
<div class="reorder-sm">
<div id="b" class="col-md-5 col-sm-12 col-xs-12">B</div>
<div id="c" class="col-md-12 col-sm-12 col-xs-12">C</div>
</div>
</div>
</div>
个
CSS:
@media (max-width: 991px) {
.reorder-sm {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
direction: rtl;
}
.reorder-sm > [class*="col-"] {
-webkit-transform: rotate(-180deg) translate(0,300%);
-moz-transform: rotate(-180deg) translate(0,300%);
-ms-transform: rotate(-180deg) translate(0,300%);
-o-transform: rotate(-180deg) translate(0,300%);
transform: rotate(-180deg) translate(0,300%);
direction: ltr;
}
}
为完整的解决方案见fiddle。你也可能会发现this similar question有帮助。
另一种解决方案:
<div id="a" class="col-md-7 col-sm-12 col-xs-12">A</div>
<div id="b1" class="col-md-5 hidden-sm hidden-xs">B</div>
<div id="c" class="col-md-12 col-sm-12 col-xs-12">C</div>
<div id="b2" class="visible-sm visible-xs col-sm-12 col-xs-12">B</div>
作为最佳实践的StackOverflow的一部分,永远分享你的工作代码,不管它是多么的错误。 –
Mahi,你可以添加一个额外的重复'DIV',这将在Desktop/mobile中可见并将其隐藏在另一个'viewport'中(就像切换一样)。因为你想要实现的布局不能直接在Bootstrap中使用,除非你使用'position:absolute'属性。 –