私は Twitter Bootstrap を使用してプロジェクトを開始しています。これはレスポンシブ CSS と非常によく似ており、ビューポートが小さくなると、スパンが互いに重なり合ってスタックされます。
次の設計が与えられた場合: http://jsfiddle.net/kJp6J/1/
小さな画面で最初にスタックするブロックを選択することはできますか? 私の場合、右側のブロックが最初に表示され、次に左側のブロックが表示されるようにします。
これを行う方法はありますか?
私は Twitter Bootstrap を使用してプロジェクトを開始しています。これはレスポンシブ CSS と非常によく似ており、ビューポートが小さくなると、スパンが互いに重なり合ってスタックされます。
次の設計が与えられた場合: http://jsfiddle.net/kJp6J/1/
小さな画面で最初にスタックするブロックを選択することはできますか? 私の場合、右側のブロックが最初に表示され、次に左側のブロックが表示されるようにします。
これを行う方法はありますか?
コンテンツを.container
で囲み、その大きなブロックを最初に置き、.pull-right
正しく表示されるように追加します。
<div class="container">
<div class="row">
<div class="span4 pull-right">
<img src="http://placehold.it/280x180">
</div>
<div class="span8">
<!-- ... -->
</div>
</div>
</div>
モバイルの場合は、あるべき場所に次のように配置しfloat:none
ます。
@media (max-width: 767px) {
[class*="span"].pull-right {
float: none;
}
ここにfiddleがあります。希望どおりに機能することを願っています。