ボタンをクリックしてブートストラップのフリップカラムをクリックしてください

Question

私はかなり簡単だと思うものを見つけようとしています。私は基本的なブートストラップレイアウトがここに示されている：

<div class="row"> 
     <div class="col-md-6" id="tallyForm"> 
      some content on left side 
      <div class="row"> 
      <div class="col-md-8 col-md-offset-2"> 
       <button class="btn btn-default" id="flipForm">Flip Form</button> 
      </div> 
      </div> 
     </div> 
     <div class="col-md-6" id="studentImage"> 
      image loaded here... 
     </div> 
    </div> 

を私は単にボタンをtallyFormとstudentImageのdivを反転したい、左から右へ、再度クリックして、それが正常に戻って行きます。私は自分のプロジェクトでjqueryを持っているので、私はボタンにクリックイベントをアタッチし、プッシュまたはプルクラスで何かをやっていると仮定しています。

Answer 1

すべてのhtmlをリロードするソリューションにもかかわらず、あなたが列をプッシュとプルするために、ブートストラップの方法を使用することができます。

効果をもたらすクラスを単に切り替えるだけです。実例：http://www.bootply.com/JzaVGZORKy

$('#flipForm').click(function(e) { 
    $('#studentImage').toggleClass('col-md-pull-6') 
    $('#tallyForm').toggleClass('col-md-push-6') 
}) 

Answer 2

私はちょうどdivの.html()の内容を保存してから、それらを入れ替えました。ボタンを自分の行に移動しなければならなかった、そうでなければ動いてしまった。

jQueryの

$('#flipForm').click(function(){ 
    var temp = $('#tallyForm').html(); 
    $('#tallyForm').html($('#studentImage').html()); 
    $('#studentImage').html(temp); 
}); 

HTML

<div class="row"> 
    <div class="col-md-6" id="tallyForm">some content on left side</div> 
    <div class="col-md-6" id="studentImage">image loaded here...</div> 
</div> 
<div class="row"> 
    <div class="col-md-8 col-md-offset-2"> 
     <button class="btn btn-default" id="flipForm">Flip Form</button> 
    </div> 
</div> 

bootply