ブートストラップv3：モバイルビューとデスクトップビューポートの2つの異なる「行」を作成

Question

私のチームはグリーンフィールドの仕事をいくつか行っており、ブートストラップCSSフレームワークを採用しています。

私たちはいくつかの要素を適切なサイズにすることが難しいということです。開発者の1人は、2つの行を作成することに決めました.1つはモバイルで表示され、もう1つはデスクトップで表示されます。

<div class="row hidden-sm hidden-xs"> 
... code for desktop 
</div> 

<div class="row hidden-lg hidden-md"> 
... code for mobile 
</div> 

これは間違っていると感じます。後で変更が必要な場合のテストが複雑になり、後で行方不明のリスクが増加するようです。さらに、それはロジックを「ビュー」に持ち込みます（私たちはMVCの原則に従います）。

上記のコードスニペットはベストプラクティスに従っていますか？これを完全に正当な方法でコード化できるのですか？

Answer 1

これは有効ですが、実際にはそれぞれのレイアウト（モバイルとデスクトップ）に応じています。通常、responsive utility classesは重複したマークアップを必要とするため、「最後の手段」として使用されます。ブートストラップドキュメントから

..

「限定的にこれらを使用してみてくださいと同じサイトの完全に異なるバージョンを作成しない。その代わりに、各デバイスのプレゼンテーションを補完するためにそれらを使用しています。」

まず、例えば...などを注文し、here's how you can create one version for both desktop and mobileを

を入れ子に他の応答ブートストラップが、そのような異なるグリッドサイズ/ブレークポイントを使用していますグリッド・オプション、列の折り返しを、してみてください。これは、複数のグリッドサイズ/ブレークポイントと列順序（プッシュプル）を使用します。

Answer 2

私はそれがcolsを使用して行われるべきだと思います。あなたが行に入れる必要があるものに合っているかどうかはわかりませんが、私は little penと言っています。 ブートストラップにはxs、sm、md、およびlgのcolsがあります。 XSはスマートフォンだけでなくSMのようなもので、MDはタブレットや小型のノートパソコン、LGは普通のモニターです。 （多かれ少なかれ）

<div class="row"> 
    <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8"> 
    Content-div 
    </div> 
    <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"> 
    Right-side-div 
    </div> 
</div>