两列，出现并排 - 引导3

我有以下的HTML两列，出现并排 - 引导3

<div class="row col-lg-12" id="productBrief"> 
    <div id="RaspberryAndChocolate" style="display:none; height:200px;"> 

     <div class="col-lg-6"> @*-- Floats Left*@ 
      <img src="~/Content/Images/YogurtImages_404x290/image1.png" class="img-responsive" style="margin: 0 auto; padding-top: 5%" alt="Image alt" /> 
     </div> 

     <div class="col-lg-6" id="productDesc"> @*-- Floats Right*@ 
      <h2 class="raspberryRed productLineHeight">FLAVOUR #3</h2> 
      <h1 class="raspberryRed"> 
       RASPBERRY &<br /> WHITE CHOCOLATE 
      </h1> 
      <p class="productPara"> 
       A decadent combination of whole raspberries and smooth white chocolate that you will want to make last as long as possible. Teaspoon recommended. 
      </p> 
      <p> 
       <span class="label label-as-badge" style="font-size: 0.9em; padding:3%"><a href='@Url.Action("Products", "Products")' class="colourWhite">VIEW ALL FLAVOURS</a></span> 
      </p> 
     </div> 
    </div> 
</div>

他们并排看起来很大排列侧的桌面，在观看时上查看时Ipad productDesc出现在productBrief下面，它看起来像两行，我怎么能改变这个，所以当他们在ipad上观看时他们并排出现？我是bootstrap的新手，所以我试图让我的脑袋围绕cols等

来源

2015-02-11 Code Ratchet

尝试使用'COL-XS-6' – 2015-02-11 03:53:50

@JosanIracheta当你评论第一，就是答案，你会做您的评论的答案那么我就可以给你点数？另外，因为他们为ipad工作，有一种方式我可以说如果移动显示每行一个，所以productDesc出现在productBrief下面？ – 2015-02-11 03:58:47

本课程适用于手机。所以对于手机来说，这些列将会堆叠起来。我现在会写一个答案。 – 2015-02-11 04:00:41