這是相當棘手。這是我想出的解決方案。您將需要使用一些jQuery來獲得所需的結果。
下面是HTML,請注意我如何切換列:
<div class="container text-center">
<div class="row">
<div class="col-sm-4 col-lg-3 col-lg-push-9">
<div class="alert alert-warning">A</div>
</div>
<div class="col-sm-8 col-lg-6 col-lg-pull-0 big">
<div class="alert alert-danger">C</div>
</div>
<div class="col-sm-4 col-lg-3 col-lg-pull-9 small">
<div class="alert alert-info">B</div>
</div>
</div>
</div>
這裏是jQuery的:
<script>
var $iW = $(window).innerWidth();
if ($iW < 768){
$('.small').insertBefore('.big');
}else{
$('.big').insertBefore('.small');
}
</script>
注:這樣做的缺點是,jQuery是沒有綁定窗口大小調整。所以,如果您在文檔加載後調整窗口大小,那麼結果會非常糟糕。不過,這也可以通過使用$(window).resize(function(){});
但是,如果你根本不想使用JS。這是另一個解決方案,需要你複製你的一個塊。如果這個塊的內容是靜態的並且不是很多,我相信這是一個很好的折衷。不過,您也可以稍微調整一下以適應您的需求。
下面是HTML:
<div class="container text-center">
<div class="row">
<div class="col-sm-4 col-lg-3 col-lg-push-9">
<div class="alert alert-warning">A</div>
</div>
<div class="col-sm-4 small-screen-only">
<div class="alert alert-info">B</div>
</div>
<div class="col-sm-8 col-lg-6 col-lg-pull-0 big">
<div class="alert alert-danger">C</div>
</div>
<div class="col-sm-4 col-lg-3 col-lg-pull-9 small">
<div class="alert alert-info">B</div>
</div>
</div>
</div>
通知塊B的重複
這裏是CSS:
.small-screen-only{
display: none;
}
@media all and (max-width: 767px)
{
.small-screen-only{
display: block
}
.small{
display: none;
}
}
我個人會選擇CSS選擇,因爲它是更原生瀏覽器。即使塊的內容是動態添加的,我相信你仍然可以找到解決方法。
你認爲它不能用css完成嗎? –
@SS我個人也總是試圖找到一種方法來儘可能消除js。如果你的塊的內容是靜態的,而不是很多,你不介意重複它們。我將添加僅使用CSS的第二個解決方案。 – Medard