Javascript使用内容翻转div

我有一个页面，其中应该有2行，每行包含两个矩形div和内容（图像、h3和段落）。单击div时，它必须翻转以显示其背面内容

所有的工作都是通过引导完成的，脚本取自

这件事对我来说很简单，但不可能：那两排排在一起。我所需要的就是让他们待在不同的位置，做出反应

这是我的HTML：

 <div class="container grid-container">  

        <div class="row">
            <div class="card-grid col-md-6">
                <div class="front">
                    <img src="images/1.jpg" class="img-responsive"/>
                    <h3>Front text</h3>
                    <p> ---  </p> 
                </div> 
                <div class="back">
                    <h2>Back text</h2>
                </div>  
             </div>       

            <div class="card-grid col-md-6">
                <div class="front">
                    <img src="images/2.jpg" class="img-responsive"/>
                    <h3>Front text</h3>
                    <p> ---  </p> 
                </div> 
                <div class="back">
                    <h2>Back text</h2>
                </div>  
             </div>       

        </div>

        <div class="row">
            <div class="card-grid col-md-6">
                <div class="front">
                    <img src="images/3.jpg" class="img-responsive"/>
                    <h3>Front text</h3>
                    <p> ---  </p> 
                </div> 
                <div class="back">
                    <h2>Back text</h2>
                </div>  
             </div>        

            <div class="card-grid col-md-6">
                <div class="front">
                    <img src="images/4.jpg" class="img-responsive"/>
                    <h3>Front text</h3>
                    <p>  --- </p>  
                </div>
                <div class="back">
                    <h2>Back text</h2>
                </div>   
             </div>     

        </div>

    </div>   

关于CSS：我试图使类

.front

和

和
back
不那么具体，然后我试图通过使它们更具体来覆盖引导的CSS文件。没有变化

我的主要JS脚本如下：

  $(function(){
    $(".card-grid").flip({
    trigger:"click"
    });
  });

我认为下面的代码可以帮助您

小提琴：

HTML:

@托恩普林斯。。我想你应该换一种颜色，然后用。。它一个接一个地显示你所有的div..已替换。没有任何改变…仍然彼此重叠。我删除了上面带有代码行的脚本文件，现在div位于不同的行上。但那部分已经出来了，所以没有什么东西会翻动，我会的。正如我所说的，如果我不把触发器放在翻页上，这些div就在不同的行上，但是一旦我纠正了触发器，它们就会像以前一样堆叠在一起。@tornprice。。请你再核对一下我的答案好吗？这是小提琴
  $(function(){
    $(".card-grid").flip({
    trigger:"click"
    });
  });

<div class="grid">
<div class="row">
   <div id="card" class="card col-lg-3 col-md-3 col-sm-3 col-xs-12">   
    <div class="front"> 
     <img src="http://www.kiplinger.com/quiz/business/T049-S001-test-your-start-up-know-how/images/all-small-businesses-have-to-be-incorporated1.jpg" class="img-responsive"/>
     <h3>Front text</h3>
     <p> -&#45;&#45;  </p>
    </div> 
    <div class="back">
     <h2>Back text</h2>
    </div> 
  </div>
<div style="height:500px;">

</div>
<div class="card col-lg-3 col-md-3 col-sm-3 col-xs-12"> 

    <div class="front"> 
      <img src="http://www.kiplinger.com/quiz/business/T049-S001-test-your-start-up-know-how/images/all-small-businesses-have-to-be-incorporated1.jpg" class="img-responsive"/>
      <h3>Front text</h3>
      <p> -&#45;&#45;  </p>
   </div> 
   <div class="back">
     <h2>Back text</h2>
   </div> 
</div>
</div>
</div>

$(function($) {
   $(".card").flip(); 
});