Question

在桌面视图中，这看起来像我想要的，但是在移动视图中，旁边的框移动到主框的下方。我想在上面。我该怎么办？

df <- structure(list(id = c(1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 
2L, 2L, 2L, 2L, 2L, 2L, 2L, 2L, 2L, 2L), t = c(1L, 2L, 2L, 3L, 
4L, 5L, 6L, 7L, 8L, 9L, 0L, 1L, 2L, 3L, 4L, 5L, 6L, 7L, 8L, 9L
), value_1 = c(NA, 2L, 2L, 2L, 2L, 2L, 2L, 2L, 2L, 2L, NA, 5L, 
5L, 5L, 5L, 5L, 5L, 5L, 5L, 5L), value_2 = c(NA, NA, 2L, 2L, 
2L, 2L, 2L, 2L, 2L, 2L, NA, NA, 2L, 2L, 2L, 2L, 2L, 2L, 2L, 2L
), value_3 = c(NA, NA, NA, 5L, 5L, 5L, 5L, 5L, 5L, 5L, NA, NA, 
NA, 2L, 2L, 2L, 2L, 2L, 2L, 2L), value_4 = c(NA, NA, NA, NA, 
2L, 2L, 2L, 2L, 2L, 2L, NA, NA, NA, NA, 2L, 2L, 2L, 2L, 2L, 2L
), value_5 = c(NA, NA, NA, NA, NA, 7L, 7L, 7L, 7L, 7L, NA, NA, 
NA, NA, NA, 7L, 7L, 7L, 7L, 7L), value_6 = c(NA, NA, NA, NA, 
NA, NA, 7L, 7L, 7L, 7L, NA, NA, NA, NA, NA, NA, 7L, 7L, 7L, 7L
), value_7 = c(NA, NA, NA, NA, NA, NA, NA, 2L, 2L, 2L, NA, NA, 
NA, NA, NA, NA, NA, 2L, 2L, 2L), value_8 = c(NA, NA, NA, NA, 
NA, NA, NA, NA, 2L, 2L, NA, NA, NA, NA, NA, NA, NA, NA, 2L, 2L
), value_9 = c(NA, NA, NA, NA, NA, NA, NA, NA, NA, 2, NA, NA, 
NA, NA, NA, NA, NA, NA, NA, 2)), row.names = c(NA, -20L), class = "data.frame")

Answer 1

使用引导程序4中的订购者类

<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>

了解更多信息 https://getbootstrap.com/docs/4.0/utilities/flex/#order

Answer 2

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

https://jsfiddle.net/robbiegod/nd95m6xh/

.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;
  }
}

将其设置为默认订单。

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

Bootstrap右手放在一边需要出现在手机的左div上方

2 个答案: