Html 三个面板的引导网格布局_Html_Layout_Twitter Bootstrap 3

Html 三个面板的引导网格布局

html layout twitter-bootstrap-3

Html 三个面板的引导网格布局,html,layout,twitter-bootstrap-3,Html,Layout,Twitter Bootstrap 3,我有三个面板，应该和桌面上的一样 ______________ ___ | | | | | | | | | 1 | | 3 | |______________| | | ______________ | | | | | | | | | | | 2 | | | | | | | |___

我有三个面板，应该和桌面上的一样

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

但在小型设备上，面板应该是有序的

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

我试过了

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


请尝试以下操作：
<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>




111111
333333
2222222
解决方案是为大型设备添加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>

@介质（最小宽度：768px）{
.sm向右拉{
浮动：对；
} 
}


111111
333333
2222222
不，不起作用。面板2在完全模式下感觉向下。所以它在面板下面
@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>