css - 基礎フレームワーク モバイルでの要素の並べ替え

Question

Foundation Framework 3.2 を使用しています。

私のコンテンツ エリアは 9 列、サイド バー (右側) は 3 列です。

モバイル デバイスでページを表示すると、コンテンツ エリアが最初に表示され、コンテンツ エリアの下にサイド バーが表示されます。もちろん、これはデフォルトのグリッドの動作であり、期待どおりに機能します。

その代わりに、サイドバーを最初にレンダリングし、次にコンテンツエリアの下にレンダリングしたいと思います。

それは可能でしょうか？

ありがとう！

Answer 1

Bootstrapにも同様の手法を使用しました（フレームワークに依存しません）。私はあなたがこのようなマークアップを持っていると思います：

​<div class="row">
  <div class="nine columns content">
      <h1>Content</h1>
  </div>
  <div class="three columns sidebar​​">
      <h1>Sidebar</h1>
  </div>
</div>

サイドバーを最初に配置します。

<div class="row">
  <div class="three columns sidebar">
      <h1>Sidebar</h1>
  </div>
  <div class="nine columns content">
      <h1>Content</h1>
  </div>
</div>

次に、それを正しく浮かせます。

.sidebar {
  float: right;
}

モバイルでフロートをリセットします。

@media only screen and (max-width: 767px) {
  .sidebar {
    float: none;
  }
}

それがどのように機能するかをチェックしてください。