html - 如何使用 Bootstrap 排列列/行

Question

我刚开始使用 Bootstrap，我希望我的边栏在屏幕尺寸为 xs 时在行之间移动。

所以在正常的屏幕尺寸上，格式看起来像这样:

AAAAAAAA | BBBBCCCCCCCC | BBBB

And on smaller screen sizes, the format would be

AAAAA
BBBBB
BBBBB
CCCCC

I'm having trouble arranging my div boxes around in a way that would work. Sidebar B is several lines long so if I make Text C into another row, there would be a lot of empty space between Text A and Text C, which is not what I want.

Is there a way for me to insert my sidebar between Text A and 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="https://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&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;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>

Answer 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="https://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 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&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;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>