Foundation Zurb 媒体查询答案

【问题标题】：Foundation Zurb media queryFoundation Zurb 媒体查询
【发布时间】：2014-10-08 14:14:10
【问题描述】：

我正在尝试切换 large-8 和 large-4 这两列的位置，我希望在小屏幕上查看页面时文本位于图像下方。

列结构是这样的

div id="roofing">
            <div class="large-8 columns">
                <h3>Roofing</h3>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                        Vitae tempora quia voluptas iure iste quas libero esse maiores dolore illo magni quo magnam voluptatem,
                        ea suscipit, quaerat omnis delectus dolorem!
                    </p>
            </div>
            <div class="large-4 columns">
                <!-- <img src="http://placehold.it/350x150"> -->
                <img src="imgs/roofing.jpg" alt="">
            </div>
        </div>

媒体查询（40em）

#roofing{
        .large-8{
            // width: 33.33333%;
            float: left;
            background: red;
        }
        .large-4{
            // width: 66.66667%;
            float: right;
        }
    }

我认为改变它的浮动会起作用，但不幸的是它没有。

【问题讨论】：

标签： html css media-queries zurb-foundation

【解决方案1】：

你不需要 css 来处理基金会的预定义类（组合）small live DEMO 和备用 large-push 和 large-pull 数字

将您的标记更改为此full page DEMO

<div id="roofing" class="row">
    <div class="large-4 large-push-8 small-12 columns">
        <!-- <img src="http://placehold.it/350x150"> -->
        <img src="imgs/roofing.jpg" alt="" />
    </div>
    <div class="large-8 large-pull-4 small-12 columns">
        <h3>Roofing</h3>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            Vitae tempora quia voluptas iure iste quas libero esse maiores dolore illo magni quo magnam voluptatem,
            ea suscipit, quaerat omnis delectus dolorem!
        </p>
    </div>      
</div>

【讨论】：

是的，抱歉应该编辑我的，我现在找到了这个解决方案，我记得他们的文档中有一个订单列。但会给它一个检查:)。