我刚刚开始使用Bootstrap，当屏幕大小为xs时，我希望我的侧边栏在行之间移动。
因此，在正常的屏幕尺寸上，格式如下：
AAAAAAAA | BBBB CCCCCCCC | BBBB
在较小的屏幕尺寸上，格式为
AAAAA
BBBBB
BBBBB
CCCCC
我无法以一种可行的方式安排我的div盒子。边栏B有几行，所以如果我将文本C放到另一行，文本A和文本C之间会有很多空白空间，这不是我想要的。
我有没有办法在文本A和C之间插入我的侧边栏？
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<div class="row" style="margin-top: 1em;">
<div class="col-md-8">
<div class="row">
<div class="col-md-3 col-xs-12" style="text-align: center;"><img src="/images/video-thumbnails/ice.jpg" class="songThumbnail">
</div>
<div class="col-md-4 col-xs-12">
<span class="trackField">Title:</span> ice<br>
<span class="trackField">Producer:</span> <a href="http://vocadb.net/Ar/91">whoo</a><br>
<span class="trackField">Lyricist:</span> <a href="http://vocadb.net/Ar/3318">eau.</a><br>
<span class="trackField">Other Credits:</span>
<span class="nobr"><a href="http://vocadb.net/Ar/3318">eau.</a> <span class="whisper">(direction, video)</span>,</span>
<span class="nobr"><a href="http://vocadb.net/Ar/5179" title="ohu">笹篠</a> <span class="whisper">(art)</span></span></div>
<div class="col-md-5 col-xs-12">
<span class="trackField">Official Broadcasts:</span>
<span class="nobr"><a href="http://www.nicovideo.jp/watch/sm15920143">
<img src="/images/icons/niconico.png" class="favicon"></a>
<a href="http://kkbox.fm/Fs0svB">
<img src="/images/icons/kkbox.png" class="favicon"></a></span> <br>
<span class="trackField">Commercial Links:</span>
<span class="nobr"><a href="http://www.amazon.com/dp/B007U2J3Q8/"><img src="/images/icons/amazon-us.png" class="favicon"></a> <a href="https://www.amazon.co.jp/gp/product/B007U1COXI"><img src="/images/icons/amazon-jp.png" class="favicon"></a> </span><br>
<span class="trackField">Unofficial Links:</span>
<span class="nobr"><a href="http://www5.atwiki.jp/hmiku/pages/18740.html"><img src="/images/icons/hmiku-wiki.png" class="favicon"></a> <a href="http://vocaloid.wikia.com/wiki/Ice"><img src="/images/icons/vwiki.png" class="favicon"></a> <a href="http://vocadb.net/S/3496"><img src="/images/icons/vocadb.png" class="favicon"></a> <a href="http://utaitedb.net/S/8458"><img src="/images/icons/utaitedb.png" class="favicon"></a></span>
</div>
</div>
<div class="row">
<div class="col-md-12" style="margin: 1em;">
<img src="/images/icons/piapro.png" class="favicon"> <a href="http://piapro.jp/t/O28F">ice - オケ</a> <span class="whisper">(karaoke)</span>
</div>
</div> <!-- Other Downloads -->
</div>
<div class="col-md-4" style="border: 1px solid red;">
<ul class="nav nav-pills">
<li class="active"><a data-toggle="pill" href="#niconico">Niconico</a></li>
<li><a data-toggle="pill" href="#youtube">YouTube</a></li>
<li><a data-toggle="pill" href="#soundcloud">SoundCloud</a></li>
</ul>
<div class="tab-content" style="text-align: center;">
<div id="niconico" class="tab-pane fade in active">
<p><div class="embed-responsive embed-responsive-16by9">
<script type="text/javascript" src="http://ext.nicovideo.jp/thumb_watch/sm28116292"></script><noscript><a href="http://www.nicovideo.jp/watch/sm28116292">【ニコニコ動画】【Faeri】ice【歌ってみた】</a></noscript>
</div></p>
</div>
<div id="youtube" class="tab-pane fade">
<br>
<strong>日本語 | Japanese</strong><br>
<br>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="http://www.youtube.com/embed/JOd9cunyWAg"></iframe>
</div>
<br>
<strong>英語 | English</strong><br>
<br>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="http://www.youtube.com/embed/mCkHvttcSoE"></iframe>
</div>
</div>
<div id="soundcloud" class="tab-pane fade">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" width="100%" height="600" scrolling="yes" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/244661025&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>
</div>
</div>
</div>
<br>
<p><strong>Base translation:</strong> Tatenia and tenkail<br>
Notes:<br>
<br>This is actually for a college assignment! I referenced unreliable translations, please consider these lyrics as more as an “adaptation”.<br>
It was really difficult to sing this! I don’t think I’ll sing the original Japanese version at the moment. The karaoke included a bit of Miku’s chorus, and unfortunately, I couldn’t remove it.</p>
</div> <!-- Media Sidebar-->
</div>
<div class="row">
<div class="col-xs-12">This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. </div>
</div>
</div>
答案 0 :(得分：1)
在col-sm-8中插入C文本，如下所示
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<div class="row" style="margin-top: 1em;">
<div class="col-md-8">
<div class="col-md-3 col-xs-12" style="text-align: center;"><img src="/images/video-thumbnails/ice.jpg" class="songThumbnail">
</div>
<div class="col-md-4 col-xs-12">
<span class="trackField">Title:</span> ice<br>
<span class="trackField">Producer:</span> <a href="http://vocadb.net/Ar/91">whoo</a><br>
<span class="trackField">Lyricist:</span> <a href="http://vocadb.net/Ar/3318">eau.</a><br>
<span class="trackField">Other Credits:</span>
<span class="nobr"><a href="http://vocadb.net/Ar/3318">eau.</a> <span class="whisper">(direction, video)</span>,</span>
<span class="nobr"><a href="http://vocadb.net/Ar/5179" title="ohu">笹篠</a> <span class="whisper">(art)</span></span></div>
<div class="col-md-5 col-xs-12">
<span class="trackField">Official Broadcasts:</span>
<span class="nobr"><a href="http://www.nicovideo.jp/watch/sm15920143">
<img src="/images/icons/niconico.png" class="favicon"></a>
<a href="http://kkbox.fm/Fs0svB">
<img src="/images/icons/kkbox.png" class="favicon"></a></span> <br>
<span class="trackField">Commercial Links:</span>
<span class="nobr"><a href="http://rads.stackoverflow.com/amzn/click/B007U2J3Q8"><img src="/images/icons/amazon-us.png" class="favicon"></a> <a href="https://www.amazon.co.jp/gp/product/B007U1COXI"><img src="/images/icons/amazon-jp.png" class="favicon"></a> </span><br>
<span class="trackField">Unofficial Links:</span>
<span class="nobr"><a href="http://www5.atwiki.jp/hmiku/pages/18740.html"><img src="/images/icons/hmiku-wiki.png" class="favicon"></a> <a href="http://vocaloid.wikia.com/wiki/Ice"><img src="/images/icons/vwiki.png" class="favicon"></a> <a href="http://vocadb.net/S/3496"><img src="/images/icons/vocadb.png" class="favicon"></a> <a href="http://utaitedb.net/S/8458"><img src="/images/icons/utaitedb.png" class="favicon"></a></span>
</div>
<div class="col-md-12" style="margin: 1em;">
<img src="/images/icons/piapro.png" class="favicon"> <a href="http://piapro.jp/t/O28F">ice - オケ</a> <span class="whisper">(karaoke)</span>
</div>
</div>
<div class="col-md-4 pull-right" style="border: 1px solid red;">
<ul class="nav nav-pills">
<li class="active"><a data-toggle="pill" href="#niconico">Niconico</a></li>
<li><a data-toggle="pill" href="#youtube">YouTube</a></li>
<li><a data-toggle="pill" href="#soundcloud">SoundCloud</a></li>
</ul>
<div class="tab-content" style="text-align: center;">
<div id="niconico" class="tab-pane fade in active">
<p><div class="embed-responsive embed-responsive-16by9">
<script type="text/javascript" src="http://ext.nicovideo.jp/thumb_watch/sm28116292"></script><noscript><a href="http://www.nicovideo.jp/watch/sm28116292">【ニコニコ動画】【Faeri】ice【歌ってみた】</a></noscript>
</div></p>
</div>
<div id="youtube" class="tab-pane fade">
<br>
<strong>日本語 | Japanese</strong><br>
<br>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="http://www.youtube.com/embed/JOd9cunyWAg"></iframe>
</div>
<br>
<strong>英語 | English</strong><br>
<br>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="http://www.youtube.com/embed/mCkHvttcSoE"></iframe>
</div>
</div>
<div id="soundcloud" class="tab-pane fade">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" width="100%" height="600" scrolling="yes" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/244661025&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>
</div>
</div>
</div>
<br>
<p><strong>Base translation:</strong> Tatenia and tenkail<br>
Notes:<br>
<br>This is actually for a college assignment! I referenced unreliable translations, please consider these lyrics as more as an “adaptation”.<br>
It was really difficult to sing this! I don’t think I’ll sing the original Japanese version at the moment. The karaoke included a bit of Miku’s chorus, and unfortunately, I couldn’t remove it.</p>
</div> <!-- Media Sidebar-->
<div class="col-md-8">This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. This is Text C. </div>
</div>
</div>
答案 1 :(得分：0)
您还可以使用最新版本的Bootstrap并利用flex order类来设置不同设备上的列顺序。
查看以下链接：