1
對不起，如果這已經被回答，我已經找到它了。響應上移列
我正在嘗試創建一個12列，響應式佈局。所有列都向左浮動。問題是我創建了一行，寬度爲100％。我想要下面的兩列。
第1列：應該是一個導航菜單，具有錨
第2欄：應該是所有用於演示
元素我置於行下面的2列。第1列相當短，並一直向下移動。第2列保持原樣。我想知道高度是否與它有關。所以我把兩列都做成了同一個高度。沒有幫助。 我也嘗試將沉沒列相對移動，這在桌面上看起來不錯，但在移動設備上看起來很糟糕。請指教。
該項目是在這裏：http://codepen.io/hherbst86/pen/OpbEzq
密碼（CSS和HTML）：
CSS：
*{
box-sizing: border-box;
}
.template-body{
width: 100%;
min-width: 320px;
max-width: 1200px;
margin: 0 auto;
}
.row{
padding: 20px;
width: 100%;
min-height: 1px;
float: left;
}
.col{
min-height: 40px;
border-radius: 8px;
display: inline-block;
margin-right: -4px;
}
.col.one {width: 8.33333%;;}
.col.two {width: 16.66667%;}
.col.three {width: 25%;}
.col.four {width: 33.33333%;}
.col.five {width: 41.66667%;}
.col.six {width: 50%;}
.col.seven {width: 58.33333%;}
.col.eight {width: 66.66667%;}
.col.nine {width: 75%;}
.col.ten {width: 83.33333%;}
.col.eleven {width: 91.66667%;}
.col.twelve {width: 100%;}
@media (max-width: 768px){
.col{
width: 100% !important;
}
}
.col.three.index-panel{
list-style-type: none;
height: 2000px;
}
.index-panel ul{
list-style-type: none;
}
.index-panel ul li{
border: 1px solid black;
padding: 20px;
}
HTML：
<head>
<title>Title Goes Here</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab|Roboto:300,400,700" rel="stylesheet">
<link rel="stylesheet" href="styles/css/nascent.css">
<style type="text/css">
section {
height: 100px;
border: 1px solid black;
}
</style>
</head>
<body class="template-body">
<div class="row">
<header>
<img class="nascent-header__logo-image" src="images/BovAcademy_logo_head.png">
<h1>Title Goes Here</h1>
<h3>Title Description</h3>
</header>
</div>
<div class="body-row row">
<div class="col three index-panel">
<nav class="index-panel">
<ul>
<li><a href="#group01">Accordions</a></li>
<li><a href="#group02">Alerts</a></li>
<li><a href="#group03">Badges</a></li>
<li><a href="#group04">Breadcrumbs</a></li>
<li><a href="#group05">Buttons</a></li>
<li><a href="#group06">Cards</a></li>
<li><a href="#group07">Carousels</a></li>
<li><a href="#group08">Dropdowns</a></li>
<li><a href="#group09">Forms</a></li>
<li><a href="#group10">Footers</a></li>
<li><a href="#group11">List Groups</a></li>
<li><a href="#group12">Modals</a></li>
<li><a href="#group13">Pagination</a></li>
<li><a href="#group14">Progress Bar</a></li>
<li><a href="#group15">Tables</a></li>
<li><a href="#group16">Typography</a></li>
</ul>
</nav>
</div>
<div class = "col nine demo-sections">
<section id="group01">
<span><a href="#top">Go to top</a></span>
</section>
<section id="group02">
<span><a href="#top">Go to top</a></span>
</section>
<section id="group03">
<span><a href="#top">Go to top</a></span>
</section>
<section id="group04">
<span><a href="#top">Go to top</a></span>
</section>
<section id="group05">
<span><a href="#top">Go to top</a></span>
</section>
<section id="group06">
<span><a href="#top">Go to top</a></span>
</section>
<section id="group07">
<span><a href="#top">Go to top</a></span>
</section>
<section id="group08">
<span><a href="#top">Go to top</a></span>
</section>
<section id="group09">
<span><a href="#top">Go to top</a></span>
</section>
<section id="group10">
<span><a href="#top">Go to top</a></span>
</section>
<section id="group11">
<span><a href="#top">Go to top</a></span>
</section>
<section id="group12">
<span><a href="#top">Go to top</a></span>
</section>
<section id="group13">
<span><a href="#top">Go to top</a></span>
</section>
<section id="group14">
<span><a href="#top">Go to top</a></span>
</section>
<section id="group15">
<span><a href="#top">Go to top</a></span>
</section>
<section id="group16">
<span><a href="#top">Go to top</a></span>
</section>
<section id="group17">
<span><a href="#top">Go to top</a></span>
</section>
<section id="group18">
<span><a href="#top">Go to top</a></span>
</section>
<section id="group19">
<span><a href="#top">Go to top</a></span>
</section>
<section id="group20">
<span><a href="#top">Go to top</a></span>
</section>
</div>
</div>
<div class="row"></div>
</body>