Having an aside column drop below previous aside - html

Question

I'm just dabbling into CSS and HTML. At the moment I have an a <article> inside that column should have two items, a picture on the left, and article information on the right(header, and paragraph). It appears okay when the screen is enlarge but if the screen shrinks the image and the text shrinks. Instead of shrinking I'm looking for the image to retain it's size and the text to drop below the image.
http://codepen.io/anon/pen/Yygdjv
<div class="container-fluid">
<div class="row">
<aside class="col-sm-1">
</aside>
<section class="col-sm-7">
<article>
<div class="row">
<aside class="col-xs-6">
<img src="http://i0.wp.com/www.sooziq.com/wp-content/uploads/2015/11/32.jpg?resize=270%2C200"/>
</aside>
<aside class="col-xs-6">
<div id="DIV___5">
<span id="SPAN___6"> Basketball</span>
<h2 id="H2___8">
What really Matters
</h2>
<span id="SPAN___10">November 12, 2015</span>
<p id="P___11">
Make sure you load up on the fluids and snacks and use the washroom because these are the top 3 things to watch for in basketball! Read More
</p>
</div>
</aside>
</div>
</article>
</section>
</div>
</div>

Answer 1

This is a twitter bootstrap 3 question. You can achieve this be changing your col-xs-6 to col-sm-6 or col-md-6 for both columns. After the sm or md breakpoint (whichever you go with), it will make the two columns full width and the image will naturally be on top. You can be more explicit with class="col-xs-12 col-sm-6" for both columns, but it's not really necessary.
Fork of your demo: http://codepen.io/anon/pen/GpezRL

Answer 2

You Can Also Use #media rule(optional) like-
#media (max-width:580px)
{
.col-xs-6 {
width: 50%;
clear: both;
}
}