Question

我有一行两列，并希望在缩小浏览器时右列（TEST NAME，CITY，ST等）显示在左列上方。从截图中可以看出，当浏览器缩小时，右列会显示在左列下方。

全尺寸浏览器

Full Size Browser

缩小到手机大小：

mobile size:

HTML：

<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->

<html lang="en"> 

<!--<![endif]-->

<head>

    <!-- Basic Page Needs -->
    <meta charset="utf-8">
    <title>Campus Taps</title>
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Mobile Specific Metas -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <!-- CSS -->
    <link rel="stylesheet" href="stylesheets/base.css">
    <link rel="stylesheet" href="stylesheets/skeleton.css">
    <link rel="stylesheet" href="stylesheets/layout.css">

    <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Favicons -->
    <link rel="shortcut icon" href="images/favicon.ico">
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">




</head>


<body>

<!--Start Navigation -->
<div class="band navigation">

<div class="container">
<div id="logo" class="two columns">
        <h1>DS</h1>
    </div>

    <div id="nav" class="fourteen columns">
        <ul><li><a href="#">TEST</a></li>
            <li><a href="#">TEST</a></li>
            <li><a href="#">TEST</a></li>
        </ul>
    </div>
</div>

</div>
</div> <!-- End Band -->


<!--Start Content -->
<div class="band bar information">

<div class="container">

<div id="bar-logo" class="five columns">
    <img src="images/zwphoto.png" width="300" height="207">

</div>
<div id="google-maps" class="six columns offset-by-one">
    <img src="images/google-maps.png" width="608" height="212" />

</div>


<div id="bar-specials" class="ten columns alpha">
<h2 class="specials-title">SPECIALS</h2>
<div class="three columns"><h3>MONDAY</h3></div>
<div class="five columns"><p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum posuere massa eu commodo. Cras fermentum erat sed volutpat dignissim. Suspendisse pretium sem ut vestibulum mattis. Donec ultrices ipsum in molestie aliquam. Nulla tristique, nisl ac ultrices tempus, dolor leo convallis risus, sed porttitor magna sapien vitae neque. </p></div>
</div>

<div id="bar-information" class="six columns omega">
<h1>TEST NAME</h1>
<p>123 TEST Road</p>
<p>CITY, ST 1111111</p>
<p>(666) 666-6666</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum posuere massa eu commodo. Cras fermentum erat sed volutpat dignissim. Suspendisse pretium sem ut vestibulum mattis. Donec ultrices ipsum in molestie aliquam. Nulla tristique, nisl ac ultrices tempus, dolor leo convallis risus, sed porttitor magna sapien vitae neque. 

</p>
</div>



<div id="bar-specials" class="ten columns alpha">
<div class="three columns"><h3>TUESDAY</h3></div>
<div class="five columns"><p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum posuere massa eu commodo. Cras fermentum erat sed volutpat dignissim. Suspendisse pretium sem ut vestibulum mattis. Donec ultrices ipsum in molestie aliquam. Nulla tristique, nisl ac ultrices tempus, dolor leo convallis risus, sed porttitor magna sapien vitae neque. </p></div>
</div>






</div>
</div> <!-- End Band -->

</body>

</html>

CSS：

.container {
}

#welcome {
    margin-top: 10px;
    text-align: left;
}

.slider{
    z-index:0;
    position: relative;
}

#logo img{
    width: 190px;
    height: 60px;
}

.band-navigation{
    background-color: #3d6430;
    width:100%;
    border-bottom: 10px solid #28421f;
    margin: 0px;
    position: fixed;
    z-index: 1;
    top:0;
}


#welcome {
    margin-top:0;
}

#welcome h1 {
    text-align: center;
}

#welcome h2 {
    text-align: center;
}

#navigation {
    top:0;
    background-color: #3d6430;

}

#download {
    margin-top: 10px;
}

#nav {
    margin: 20px 0 0 0;
}

#nav ul li {
    display: inline;
    margin: 0 50px 0 0;
    margin-bottom: 130px;

}

#nav a {
    text-decoration: none;
    color: #fff;
}

#nav a:hover {
    text-decoration: underline;
}




#welcome {
    margin-bottom: 20px;
}


/* bars.html */

.band-bars-content {
    margin-top: 100px;
}


#bars-logo{
    width: 260px;
    height: 175px;
}


.bars-box{
    background-color: #cecece;

}

.bars-box :hover{
    background-color: #000;
}


#bars-description h2 {
    font-size: 18px;
    padding: 10px;
}

#bars-description p {
    padding-left: 10px;
}

#bars-address p{
    margin: 0px;
}

/*  barsDetail.html */
#bar-logo {
    margin-top: 100px;
}

#google-maps{
    margin-top: 100px;
}


/* about.html */

.band-about-content{
    margin-top: 100px;
}

#section{
    margin-bottom: 20px;
}

#mobile-mockup-image img{
    height: 450px;
    width: 250px;
}

#newsletter-mockup-image img{
    margin-left: 0px;
    margin-top: 20px;
    margin-bottom: 50px;
    height: 400px;
    width: 400px;
}

.band-about-footer{
    background-color: #3d6430;
    width: 100%;
    bottom: 0px;
}

#footer ul li{
    display: inline;
}

#footer a{
    color: #fff;
    font-weight: heavy;
}

/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/

/* Table of Content
==================================================
    #Site Styles
    #Page Styles
    #Media Queries
    #Font-Face */

/* #Site Styles
================================================== */

/* #Page Styles
================================================== */

/* #Media Queries
================================================== */

    /* Smaller than standard 960 (devices and browsers) */
    @media only screen and (max-width: 959px) {}

    /* Tablet Portrait size to standard 960 (devices and browsers) */
    @media only screen and (min-width: 768px) and (max-width: 959px) {}

    /* All Mobile Sizes (devices and browser) */
    @media only screen and (max-width: 767px) {
        .band.content {
        margin-top: 140px;
    }
    }

    /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
    @media only screen and (min-width: 480px) and (max-width: 767px) {
        .band.content {
        margin-top: 140px;
    }
    .band.bar.information{
        margin-top: 80px;
}  

.band-bars-container{
        margin-top: 150px;
    }


    #bars-description{
    margin-top: 50px;

}

    }

    /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
    @media only screen and (max-width: 479px) {
        .band.content {
        margin-top: 140px;
    }
    .band.bar.information{
        margin-top: 80px;
}   
    .band-bars-container{
        margin-top: 150px;
    }


    #bars-description{
    margin-top: 50px;

}

    }


@media only screen and (max-width: 320px) {
    .band.content {
        margin-top: 140px;
    }
    .band.bar.information{
        margin-top: 80px;
}
    .band-bars-container{
        margin-top: 150px;
    }

    #bars-description{
    margin-top: 50px;

}

}

/* #Font-Face
================================================== */
/*  This is the proper syntax for an @font-face file
        Just create a "fonts" folder at the root,
        copy your FontName into code below and remove
        comment brackets */

/*  @font-face {
        font-family: 'FontName';
        src: url('../fonts/FontName.eot');
        src: url('../fonts/FontName.eot?iefix') format('eot'),
             url('../fonts/FontName.woff') format('woff'),
             url('../fonts/FontName.ttf') format('truetype'),
             url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
        font-weight: normal;
        font-style: normal; }
*/

Skeleton Grid System - 在浏览器收缩时更改列的位置

0 个答案: