11

私は Twitter Bootstrap を使用してプロジェクトを開始しています。これはレスポンシブ CSS と非常によく似ており、ビューポートが小さくなると、スパンが互いに重なり合ってスタックされます。

次の設計が与えられた場合: http://jsfiddle.net/kJp6J/1/

Twitterレスポンシブデザイン

小さな画面で最初にスタックするブロックを選択することはできますか? 私の場合、右側のブロックが最初に表示され、次に左側のブロックが表示されるようにします。

これを行う方法はありますか?

4

1 に答える 1

27

HTML

コンテンツを.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>

CSS

モバイルの場合は、あるべき場所に次のように配置しfloat:noneます。

@media (max-width: 767px) {
  [class*="span"].pull-right {
    float: none;
}

ここにfiddleがあります。希望どおりに機能することを願っています。

于 2012-09-01T11:14:17.710 に答える