Css 如何以我自己的方式组织引导网格系统？

我想以我的方式重新组织引导网格系统，以达到工作目的。我的普通引导网格系统代码：

<div class="container">
   <div class="row">
         <div class="col-md-3 col-xs-12">
              Left Side bar
         </div>
         <div class="col-md-6 col-xs-12">
              Main Content
         </div>
         <div class="col-md-3 col-xs-12">
              Right Side bar
         </div>
   </div>
</div>

左侧杆
主要内容
右侧栏

但我想为移动设备组织这些内容：

主要内容->左侧栏->右侧栏

如何实现这一点？

您需要使用引导中的类。处理此问题的最佳方法是从希望列在mobile view中的排序方式开始，然后在希望它们交换的断点处添加推/拉类。例如：

.main{背景色：红色；}
.left{背景色：绿色；}
.right{背景色：蓝色；}

主要内容
左侧杆
右侧栏

您需要将媒体查询与flexbox一起使用。你已经写了一些css了吗？你能给我一些参考吗？@robjez不需要，Bootstrap已经为这类东西提供了推/拉类。