在bootstrap中，当屏幕宽度缩小时，我可以将垂直的col lg-2转置为水平行吗？

Question

在大屏幕上，我的布局看起来很不错，如下所示：

---------------
|col-lg-10||A |
|         ||B |
|         ||C |
---------------

当我稍微缩小屏幕宽度时，我想让它像这样重新排列：

-----------
|col-lg-10|
|         |
|         |
-----------
|A ||B ||C |

然而，现在它是这样重新排列的：

-----------
|col-lg-10|
|         |
|         |
-----------
|A |
|B |
|C |

这是我当前的网格布局：

        <div class="row">
            <div class="col-lg-10">
                <div id="mainChart">
                </div>
            </div>
            <div class="col-lg-auto">
                <div class="row">
                    <div id="A">
                    </div>
                </div>
                <div class="row">
                    <div id="B">
                    </div>
                </div>
                <div class="row">
                    <div id="C">
                    </div>
                </div>
            </div>
        </div>

我尝试过行和列的不同组合，但似乎不能同时满足这两个条件。你知道我能做什么吗？

Answer 1

<div class="row">
  <div class="col-lg-10 col-sm-12">
    <div id="mainChart">
    </div>
  </div>
  <div class=" col-lg-2 col-sm-12 d-flex d-lg-block">
    <div class="row">
      <div id="A">
      </div>
    </div>
    <div class="row">
      <div id="B">
      </div>
    </div>
    <div class="row">
      <div id="C">
      </div>
    </div>
  </div>
</div>