html - 基金会 Zurb 媒体查询

Question

我正在尝试切换 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;
        }
    }

我以为改变它的 float 会起作用，但不幸的是它没有。

Answer 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>