Bootstrap 4 在mobile中，引导右侧需要显示在左div上方_Bootstrap 4

Bootstrap 4 在mobile中，引导右侧需要显示在左div上方

bootstrap-4

Bootstrap 4 在mobile中，引导右侧需要显示在左div上方,bootstrap-4,Bootstrap 4,在桌面视图中，这看起来像是我想要的，但在移动视图中，侧边框移动到主框的下方。我想把它放在上面。我该怎么做主箱在一边在引导程序4中使用order类 <body> <div class='container'> <div class="row"> <div class='bg-primary text-white col-md-7 order-2 order-md-1' >Main Box

在桌面视图中，这看起来像是我想要的，但在移动视图中，侧边框移动到主框的下方。我想把它放在上面。我该怎么做


主箱
在一边

在引导程序4中使用order类

<body>
    <div class='container'>
      <div class="row">
        <div class='bg-primary text-white col-md-7 order-2  order-md-1' >Main Box
        </div>
        <div class=' bg-danger col-md-3 border-left order-1 pr-5  order-md-2' > Aside
        </div>
      </div>
    </div>
    </body>


主箱
在一边

更多信息

Twitter引导使用display:flex。您可以在css中使用“顺序”来控制内容的顺序

将其设置为默认顺序

然后在媒体查询中，将顺序更改为桌面所需的顺序

<body>
    <div class='container'>
      <div class="row">
        <div class='bg-primary text-white col-md-7 order-2  order-md-1' >Main Box
        </div>
        <div class=' bg-danger col-md-3 border-left order-1 pr-5  order-md-2' > Aside
        </div>
      </div>
    </div>
    </body>

.bg-primary {
  height: 100px;
  order: 3;
}

.bg-danger {
  height: 100px;
  order: 1;
}

@media only screen and (min-width: 768px) {
  .bg-primary {
    order: 1;
  }

  .bg-danger {
    order: 3;
  }
}