Bootstrap：在小屏幕上重新排序 3 列

我在尝试使用 bootstrap、HTML 和 CSS 对列重新排序时遇到一些问题。

目前，我的布局是这样的：

B 和 C 包含在单个列中，而 A 本身有一个列。在台式机和平板电脑上，这样就可以了，但我需要为小型设备重新排序内容以获得如下内容：

我的代码目前是这样的：

    <div class="container">
        <div class="row padding-m">
            <div class="col-md-6">
                <div class="card" style="padding: 0px 20px;">
                    BLOCK A
                    
                </div>
            </div>
            <div class="col-md-6">
                <div class="card" style="border: none;">
                    
                    BLOCK B
                    
                    BLOCK C
                    
                </div>
            </div>
        </div>
    </div>

所以我的问题是，一方面，我需要将第 2 列分成两部分，另一方面，我需要 B 移动到列的顶部，C 移动到底部。有什么办法可以做到这一点吗？

假设“A”比你的图片更高，只需使用pull-right在其他列上，以及col-xs-12确保移动设备上的全宽...

Demo

<div class="row">
        <div class="col-xs-12 col-md-6 pull-right">
            <div>
                B
            </div>
        </div>
        <div class="col-xs-12 col-md-6">
            <div>
                A
            </div>
        </div>
        <div class="col-xs-12 col-md-6 pull-right">
            <div>
                C
            </div>
        </div>
    </div>

Demo