FaeriMagic FaeriMagic - 5 months ago 14
HTML Question

How to arrange columns/rows with Bootstrap

I just started using Bootstrap, and I'd like my sidebar to move in between rows when the screen-size is xs.

So on normal screen sizes, the format would look like this:


AAAAAAAA | BBBB
CCCCCCCC | 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="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&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

Insert C texts inside the col-sm-8 like following

<!-- 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&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>

Comments