Test doesn't stack when screen is minimized bootstrap 3 - html

Question

Ok so I have the following HTML
<div class="container">
<div class="row col-sm-12" id="productBrief">
<div id="RaspberryAndChocolate" style="display:none; height:200px;">
<div class="col-sm-6 text-center">
<img src="~/Content/Images/YogurtImages_404x290/Rasberry_White_Chocolate_Yogurt.png" class="img-responsive" style="margin: 0 auto; padding-top: 5%" alt="Rasberry White Chocolate Yogurt" />
</div>
<div class="col-sm-6">
<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-danone label-as-badge" style="font-size: 0.9em; padding:3%">VIEW ALL FLAVOURS</span>
</p>
</div>
</div>
<div class="clearfix"></div>
<div id="BlueBerry" style="display:none; height:200px;">
<div class="col-sm-6 text-center">
<img src="~/Content/Images/YogurtImages_404x290/Blueberry_Yogurt.png" class="img-responsive" style="margin: 0 auto; padding-top: 5%" alt="Blueberry Yogurt" />
</div>
<div class="col-sm-6">
<h2 class="blueBerry productLineHeight">FLAVOUR #6</h2>
<h1 class="blueBerry">
BLUEBERRY
</h1>
<p class="productPara">
Just imagine plump and juicy blueberries immersed in a deliciously creamy yoghurt. Enough said.
</p>
<p>
<span class="label label-as-badge" style="font-size: 0.9em; padding:3%">VIEW ALL FLAVOURS</span>
</p>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
<div class="row">
<div class="col-lg-12 text-center">
<div class="col-lg-2"></div>
<p style="width:70%;" class="text-center col-lg-8">
Experiencing Ultimate's uniquely luscious texture for the first time is beyond words. So don't even try. Take a moment to enjoy the ultra creaminess, the juicy ripened fruits and an array of wicked indulgences that come together to create a yoghurt like no other.
</p>
<div class="col-lg-2"></div>
</div>
</div>
Now there are roughly about 8 different divs but for simplicity I am only showing 2, but only one div is shown look at it as a random affect so the user refreshes the page a different div is shown (this is done in jquery) but if you look at the bottom of the HTML you will see another row with a P tag this is what is causing he issue, when displayed on a desktop it shows like this
when I minimize the browser the text at the bottom of the image displays under the text located to the right hand side of the yogurt box as shown here.
I have added the clearfix, tried adding a new container and yet the problem still remains....

Answer 1

You are using invalid bootstrap grid. Col should be a child of row. Use correct grid and everything will work perfectly.

Answer 2

Scott, hunzaboy says you need to use the dive like this
<div class="row">
<div class="col-sm-12"></div>
</div>
I don't fully understand your question, but hope you asking this,
when re-sizing your first image, I will suitably re-size without any harm to other divs. For that You need to devide that into 3 main divs, check the below code
<div class="row">
<div class="col-md-6">This is the image holding div</div><div class="col-md-6"> this is the right side text "Flavour #6, etc..."</div>
<div class="col-md-12">This is the text on the bottom</div>
</div>
I will look, 2 columns on the top and one column in the bottom.
For mobile view, you can use col-xs-12class, the it will show as stack.
Hope this is you asking. Thanks