Html 引导程序4-仅在移动视图中将左侧项目订购到右下角

我只想在移动视图中将左侧项目下单。正如您所看到的，在移动视图中，它位于顶部，而我希望在移动视图的开头显示内容

有人能帮我把它们整理好吗

代码如下：

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12 col-md-3">
      <button class="btn btn-lg btn-primary btn-block"> Left Sidebar</button>
      <button class="btn btn-lg btn-primary btn-block"> Left Sidebar</button>
    </div>
    <div class="content-area col-xs-12 col-md-6">
      <button class="btn btn-lg btn-info btn-block"> Content</button>
      <button class="btn btn-lg btn-info btn-block"> Content</button>
    </div>
    <div class="col-xs-12 col-md-3">
      <button class="btn btn-lg btn-primary btn-block"> Right Sidebar</button>
      <button class="btn btn-lg btn-primary btn-block"> Right Sidebar</button>
    </div>
  </div>
</div>

左侧边栏
左侧边栏
内容
内容
右侧边栏
右侧边栏

如果要继续使用

bootstrap4

网格系统，只需为列分配正确的

顺序即可：


左侧边栏
左侧边栏
内容
内容
右侧边栏
右侧边栏

我省略了您的
col-xs-12
，因为这是默认设置。从一开始，我就为侧边栏和内容分配了顺序3、1和2，以便左侧侧边栏位于底部。在
md
断点及以上，我将他们的顺序重新分配到1、2和3，使他们恢复正常

演示：
看一看css网格。我还认为，通过使用float或order，它应该可以很好地工作，尽管我尝试过，但不知道其组合。谢谢David，它工作得很好。你说得对，我是新手，所以对秩序不太了解。再次感谢
<div class="container-fluid">
    <div class="row">
        <div class="order-3 col-md-3 order-md-1">
            <button class="btn btn-lg btn-primary btn-block"> Left Sidebar</button>
            <button class="btn btn-lg btn-primary btn-block"> Left Sidebar</button>
        </div>
        <div class="order-1 content-area col-md-6 order-md-2">
            <button class="btn btn-lg btn-info btn-block"> Content</button>
            <button class="btn btn-lg btn-info btn-block"> Content</button>
        </div>
        <div class="order-2 col-md-3 order-md-3">
            <button class="btn btn-lg btn-primary btn-block"> Right Sidebar</button>
            <button class="btn btn-lg btn-primary btn-block"> Right Sidebar</button>
        </div>
    </div>
</div>