Question

我有三个面板，在桌面上看起来应该是这样的

 ______________   ___
|              | |   |
|              | |   |
|      1       | | 3 |
|______________| |   |
 ______________  |   |
|              | |   |
|              | |   |
|   2          | |   |
|              | |   |
|______________| |___|

但是在小型设备面板上应该按顺序

 ____
| 1  |
|____|
 ____
| 3  |
|____|
 ____
| 2  |
|____|

我试过

 <div class="col-md-9></div>
 <div class="col-md-3></div>
 <div class="col-md-9></div>

然后panel2关闭，并尝试

<div class="col-md-9>
 <div></div>
 <div></div>
<div>
<div class="col-md-9></div>

小型设备上的订单错误。

由于

Answer 1

请尝试以下操作：

<body>

    <div class="container-fluid">
        <br>

        <div class="row">
            <div class="col-md-9 col-xs-9" style="background-color: green;">111111</div>
            <div class="col-md-3 col-xs-9" style="background-color: yellow;">333333</div>
            <div class="col-md-9 col-xs-9" style="background-color: brown;">2222222</div>
        </div>

    </div>

</body>

Answer 2

解决方案是为大型设备添加float：right样式。

@media (min-width: 768px) {
 .sm-pull-right{
   float:right;
 } 
}

  <body>
<div class="container-fluid">
  <br />
  <div class="row">

    <div class="col-sm-9" style="background-color: green;">111111</div>
    <div class="col-sm-3 sm-pull-right" style="background-color: yellow;height:220px;">333333</div>
    <div class="col-sm-9" style="background-color: brown;">2222222</div>

  </div>
</div>

三个面板的Bootstrap网格布局

2 个答案: