Media queries - stacking up contents

Question

This is a follow up for the question I asked earlier in the day. I am now trying to use media queries to stack the contents when screen size is < 350px. I am trying to stack it as image (center aligned) followed by the text ( center aligned) in the next line. I have been trying variouls combinations but I havent been able to get it. Any help is much appreciated.

<div class="freedom_carousel">
<!--Freedom section -->
<p class="heading">This is heading.</p>
<div class="container1">
    <div class="col1">
        <p>
            <img class="icon" src="/path/to/image" /> <span class="icon-text"> <b>This is </b> Text TextText TextText TextText TextText Text </span>
        </p>
    </div>
    <div class="col2">
        <p>
            <img class="icon" src="/path/to/image" /> <span class="icon-text"> <b>This is </b> Text TextText TextText TextText TextText Text </span>
        </p>
    </div>
</div>
<!--End of container 1 -->
<div class="container2">
    <div class="col1">
        <p>
            <img class="icon" src="/path/to/image" /> <span class="icon-text"> <b>This is </b> Text TextText TextText TextText TextText Text </span>
        </p>
    </div>
    <div class="col2">
        <p>
            <img class="icon" src="/path/to/image" /> <span class="icon-text"> <b>This is </b> Text TextText TextText TextText TextText Text </span>
        </p>
    </div>
</div>
<!--End of container 2 -->
</div>
</div>
<!--End of Freedom carousel -->

JSfiddle for full code: http://jsfiddle.net/0cr1zj89/1/

Answer 1

Try this:

@media screen and (max-width: 350px) {
.icon {
    width:100%;
    width:auto;
    height: auto;
    margin: 0 auto;
    display:block;
}
.icon-text {
    width:100%;
    text-align: center;
    display:block;
}
}

Answer 2

Add this to stack columns.

@media screen and (max-width: 350px) { 
    .freedom_carousel .col1,     
    .freedom_carousel .col2 {
        float: none;
        width: 100%;
        margin: 0px;
    }
}