在引导程序中，当屏幕缩小宽度时，我可以将垂直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>