html - 媒体查询 - 堆叠内容

Question

这是对我当天早些时候提出的问题的跟进。当屏幕尺寸 < 350px 时，我现在正在尝试使用媒体查询来堆叠内容。我试图将其堆叠为图像(居中对齐)，然后是下一行中的文本(居中对齐)。我一直在尝试各种组合，但我一直无法得到它。非常感谢任何帮助。

<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:http://jsfiddle.net/0cr1zj89/1/

Answer 1

将其添加到堆栈列。

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