ブートストラップを使用して画像とテキストがモバイル画面に表示されている場合の表示方法が異なる

Question

次のコードを使用しています。コードを変更するにはどうすればよいですか？フルスクリーン/デスクトップを探す方法は正しいです。サイズ "sm"については、テキストとイメージを並べ替えることができます。

私が探している注文：デスクトップ - タイトル& desc leftとimage right。

モバイル - 上のタイトル、次に画像のイメージ

コード：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<div class="container"> 
 
    <div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="col-md-6"> 
 
     <h1 id="title">Title ....................................... more text </h1> 
 
     <h3 id="description">description ....................................... more description.................... ....................................... more description ....................................... more description....................................... </h3> 
 
     </div> 
 
     <div class="col-md-6"> 
 
     <img src="http://www.unoosa.org/res/timeline/index_html/space-2.jpg" class="img-responsive"> 
 
     </div> 
 
    </div>

Answer 1

私は、HTMLの配置を変更し、leftにrightとtextにfloat画像にclassesを与えたか、あなたはtwitter-bootstrapによって提供さpull-rightとpull-leftクラスを使用することができています。

hiddenクラスもあります。twitter-bootstrapで提供されているクラスを使用して、希望するレイアウトを実現できます。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<style> 
 
.float-right { 
 
    float: right 
 
} 
 
.float-left { 
 
    float: left 
 
} 
 
</style> 
 
<div class="container"> 
 
    <div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="col-md-6 float-right"> 
 
     <h1 id="title" class="hidden-md hidden-lg">Title....................................... more text</h1> 
 
     <img src="http://www.unoosa.org/res/timeline/index_html/space-2.jpg" class="img-responsive"> 
 
     </div> 
 
     <div class="col-md-6 float-left"> 
 
     <h1 id="title" class="hidden-sm hidden-xs">Title....................................... more text</h1> 
 
     <h3 id="description">description.......................................more description....................  ......................................more description  .......................................       more description.......................................</h3> 
 
     </div> 
 
    </div>

Answer 2

Sourceは何をしたいこれです：http://jsfiddle.net/wVVbT/156/

はjQueryを使ってそれを試み、動作しているようです：

jQueryのコードを：

$(document).ready(function(){ 

     if($(window).width()<992){ 
      $('.image').after($('#description').get()); 
    } 

    $(window).resize(function() { 

    var hthree=$('#description').get(); 

    if($(window).width()<992) 
    { 

    $('.image').after(hthree); 
    }else{ 


    $('#title').after(hthree); 
    } 
}); 
});