2
ブートストラップを使用して、画面サイズがモバイルデバイスの解像度に近くなるたびに左揃えサイドバーを2つの異なる部分に分割しようとしています。 This StackOverflow postは、私がしようとしていることを設定しますが、下の画像からわかるように、サイドバーを1つの接続セクションとして表示しようとすると、列の折り返しの問題が発生します。ブートストラップでメインコンテンツの上下にサイドバーを分割する
下の画像は、サイドバーの上部が緑色で、サイドバーの下部が青色で、メインコンテンツのセクションが赤で示されています。私はこの特定の画面サイズでサイドバーの上部と下部を接続しようとしています。
BootstrapSidebarSplitImg（私の担当者が高くなるまでのimgを貼り付けることはできません...>。<）
ここで私は、私が以前に言及リンクから直接取得したコードです。コードは同じですが、何らかの理由で、下のサイドバーの列が前のコンテンツセクションのテキストの下に折り返されています。
@media (min-width: 768px) {
.col-sm-pull-right {
float: right;
}
}
.lower {
clear: left;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta charset="UTF-8">
<title>test Sidebar Split</title>
<link rel="stylesheet" href="style/main.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="upper col-sm-3" style="background:red">
<h3>I want to be <b>above</b> the main content on small screens!</h3>
</div>
<div class="col-sm-9 col-sm-pull-right" style="border: 3px solid blue">
<h1>Main content</h1>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="lower col-sm-3" style="background:green">
<h3>I want to fill the white space above!</h3>
</div>
</div>
</div>
<!-- scripts at bottom -->
<script
\t \t \t src="https://code.jquery.com/jquery-3.1.1.min.js"
\t \t \t integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
\t \t \t crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>私はショー/セクションを隠すような完全に異なる何かを持つ必要はありません解決策を見つけることを好むだろう。
任意のアイデアをいただければ幸いです！ありがとう！