Question

有人可以帮助我吗，我需要这样做

<div class="container">
<div class="col-md-6" >A</div>
<div class="col-md-12">B</div>
<div class="col-md-6">C</div>
</div>

我的上面的代码。请帮帮我

Answer 1

您可以使用推送和/或拉来实现此目的。查看此链接https://scotch.io/tutorials/reorder-css-columns-using-bootstrap。

A列的顺序需要保持不变，而B和C需要切换，以便在较大的屏幕上，C位于B之前。

Answer 2

你可以使用display：flex;并重新订购商品

Answer 3

由于你有col-12与col-6交换，所以推拉不会真正起作用，我只能想到使用hidden / show。见下面的例子：

.container div {
  background: aqua;
  border: 1px solid red;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container row">
  <div class="col-md-6">A</div>
  <div class="col-md-12 hidden-md hidden-lg">B</div>
  <div class="col-md-6">C</div>
  <div class="col-md-12 hidden-xs hidden-sm">B</div>
</div>

我不能使用bootstrap将块放在正确的位置

3 个答案: