title: Two columns to appear side by side when viewed on the tablet device - bootstrap 3
body: <p>I have the following HTML </p>
  
  <pre><code>&lt;div class="row col-lg-12" id="productBrief"&gt;
      &lt;div id="RaspberryAndChocolate" style="display:none; height:200px;"&gt;
  
          &lt;div class="col-lg-6"&gt; @*-- Floats Left*@
              &lt;img src="~/Content/Images/YogurtImages_404x290/image1.png" class="img-responsive" style="margin: 0 auto; padding-top: 5%" alt="Image alt" /&gt;
          &lt;/div&gt;
  
          &lt;div class="col-lg-6" id="productDesc"&gt; @*-- Floats Right*@
              &lt;h2 class="raspberryRed productLineHeight"&gt;FLAVOUR #3&lt;/h2&gt;
              &lt;h1 class="raspberryRed"&gt;
                  RASPBERRY &amp;&lt;br /&gt; WHITE CHOCOLATE
              &lt;/h1&gt;
              &lt;p class="productPara"&gt;
                  A decadent combination of whole raspberries and smooth white chocolate that you will want to make last as long as possible. Teaspoon recommended.
              &lt;/p&gt;
              &lt;p&gt;
                  &lt;span class="label label-as-badge" style="font-size: 0.9em; padding:3%"&gt;&lt;a href='@Url.Action("Products", "Products")' class="colourWhite"&gt;VIEW ALL FLAVOURS&lt;/a&gt;&lt;/span&gt;
              &lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>when viewed on a desktop they are aligned side by side which looks great, when viewed on a Ipad productDesc appears under productBrief it looks like two rows, how can I change this so they appear side by side when viewing on an ipad? I'm new to bootstrap so I'm trying to get my head around cols etc </p>