html - 如何将第二行的div直接放在第一行div的正下方，具有相同的列大小但被第一行中另一列的高度阻挡

Question

抱歉，如果标题令人困惑。我附上了我的问题的屏幕截图，以使其更清楚。

基本上，我希望绿边 div 直接位于红边 div 的下方，而蓝边 div 不会干扰。

这是我的 HTML 代码(我使用的是 Bootstrap v3.3.7)

<div class="container appParent">
    <div class="row">
        <div class="col-md-6" id="song-view">
            <app-selected-song-view></app-selected-song-view>
        </div>
        <div class="col-md-6" id="songs-added">
            <app-songs-added></app-songs-added>
        </div>

    </div>
    <div class="row">
        <div class="col-md-6" id="playlist-form">
            <app-playlist-form></app-playlist-form>
        </div>
    </div>
</div>

我的 CSS 仅在 div 周围设置边框。其他一切都是 Bootstrap 。

#song-view{
    border: 2px solid red;
}
#songs-added{
    border: 2px solid blue;    
}
#playlist-form{
    border: 2px solid green;    
}

Answer 1

在这种情况下，使用 pull-right，并将所有 col- 放在一个 row 中。

<div class="container appParent">
    <div class="row">
        <div class="col-md-6" id="song-view">
            <app-selected-song-view></app-selected-song-view>
        </div>
        <div class="col-md-6 pull-right col-xs-12" id="songs-added">
            <app-songs-added></app-songs-added>
        </div>
        <div class="col-md-6" id="playlist-form">
            <app-playlist-form></app-playlist-form>
        </div>
    </div>
</div>

http://www.codeply.com/go/189ofQG5Sj