HTMLブラウザのサイズに応じて列を変更する

Question

ブラウザのサイズ（モバイルスケール）に応じてコンテンツをどうやってスワップすることができるのだろうかと思っていました。私はここでブートストラップを使用しています。

以下のコードスニペットを参照してください。私はそれぞれの写真とテキストがそれぞれ2行ずつあることがわかります。最初の1つは左の写真で、もう1つは右のテキストです。

ので、セットアップは

<IMG> <Text> 
<Text> <IMG> 

ブラウザのサイズ（別名モバイル版）を低減すると、それは自動的にジャンプします：

<IMG> 
<TEXT> 
<TEXT> 
<IMG> 

非常によく、すべての作品

。

しかし、どのように私の代わりにそれを行うことができます。

<IMG> 
<TEXT> 
<IMG> 
<TEXT> 

私は基本的にコンテンツを複製し、「表示：隠された」行うには、ブラウザのサイズに応じてCSSの@mediaクエリを使用することができることを理解し、それ等の上を

しかし、すべてを複製するのではなく、これを簡単に解決する方法はありますか？私は似たような疑問を見つけましたが、@mediaの "チート"を使用する以外はこのようなものはありません。

意見&助けていただきありがとうございます。 多くのお礼ありがとうございます

---

PS：ちょうどいいと思います。それは、「デスクトップ」（現在は正しい）ですが、（並べ替え）「モバイル」であるとき、それは

<IMG> 
<TEXT> 
<IMG> 
<TEXT> 

なる必要があるとき、私は順序が

<IMG> <Text> 
<Text> <IMG> 

になりたいです。したがって、ブラウザーのサイズが変更されると、その順序を動的に変更する必要があります。私が知る限り、ブートストラップで "プッシュ" "プル"はそれをしませんし、@mediaクエリでも静的です。正しい？

  <div class="container-fluid"> 

        <div class="row"> 
         <div class="col-sm-6 half-left" > 
          <img class="" src="..."/> 
         </div> 

         <div class="col-sm-6 half-right"> 
          <p>Content here</p> 

         </div> 
        </div> 


        <div class="row">      
         <div class="col-sm-6 half-left" > 
          <p class="largeFontP">Content here</p> 
         </div> 

         <div class="col-sm-6 half-right"> 
          <img class="" src=""/> 
         </div> 
        </div> 


       </div> 

Answer 1

ブートストラップを使用すると、プッシュとプルダウンのように、列を左右に「プッシュ」および「プル」することができます。

<div class="col-sm-6 half-left col-sm-push-6"> 
    <img class="" src="..."/> 
</div> 

このように、小さなブラウザでは、列を右に押したり、左に引いたりすることができます。上記のコードは、この<div>の6列目をその最初の位置の右側にプッシュします。小さな画面で6列左に移動するには、同様のクラスcol-sm-pull-6を使用します。

読むより「列の順序」の下に、ここでブートストラップドキュメントの：

http://getbootstrap.com/css/

Answer 2

フレックスボックスを使用することをおすすめします。ここ

リンク：media queriesとflexbox

あなたの問題は、行のためにdivを使用しています。代わりに1つの親などを使用する必要があります。

<parent> 
    <wrap><img><text></wrap> 
    <wrap><img><text></wrap> 
    <wrap><img><text></wrap> 
    <wrap><img><text></wrap> 
</parent> 

フレックスとフレックスラップ：折り返しを表示するだけです。よくフレックスボックスで遊んでみましょう。

Answer 3

、その後にpushpullクラスを使用し、（「モバイル-最初」だと思う）最初のモバイルレイアウトのためのマークアップ作業を行います大画面用に調整..

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-sm-6 half-left"> 
      <img class="img-responsive" src="//placehold.it/500x200"> 
     </div> 
     <div class="col-sm-6 half-right"> 
      <p>Content here</p> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-sm-6 half-right col-sm-push-6"> 
      <img class="img-responsive" src="//placehold.it/500x200"> 
     </div> 
     <div class="col-sm-6 half-left col-sm-pull-6"> 
      <p class="largeFontP">Content here</p> 
     </div> 
    </div> 
</div> 

http://www.codeply.com/go/NSOeIemufV