基金会Zurb媒体查询

Question

我试图将这两个列的位置切换为大8和大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;
        }
    }

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

Answer 1

你不需要css那只是粉底的预定义类（合并）small 直播 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>