Question

我正在使用Bootstrap的网格来组织网页的布局。在lg和sm尺寸之间，网页如下所示：

| COL-1 | COL-2 |

当窗口的大小在xs范围内时，列的堆栈如下：

| COL-1 |

| COL-2 |

相反，我希望它像这样叠加：

| COL-2 |

| COL-1 |

为此，我创建了一个函数来切换div标签的内部HTML。它在某些时候有效，但偶尔col-1仍然高于col-2。

function mobileHandler() {
    var width=window.innerWidth;
    if (width<768) {

        var col1=document.getElementById('col1').innerHTML;
        var col2=document.getElementById('col2').innerHTML; 

        document.getElementById('col1').innerHTML=col2;
        document.getElementById('col2').innerHTML=col1;
    } 
}

window.onload=mobileHandler;
window.onresize=mobileHandler;

是否有任何人可以发现我的代码？或者有更好的方法来实现我想要的东西吗？

Answer 1

只需使用bootstrap的push和pull功能。

请参阅下面的代码段。

.cols{
  height:50px;
  border:1px solid black;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-4 col-md-push-8 cols">
      col-2
    </div>
    <div class="col-xs-12 col-sm-12 col-md-8 col-md-pull-4 cols">
      col-1
    </div>
</div>
</div>

Answer 2

将'pull-right'应用于col-1

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-4 cols pull-right">
      col-md-4
    </div>
    <div class="col-xs-12 col-sm-12 col-md-8 cols">
      col-md-8
    </div>
  </div>
</div>

JavaScript div分配不一致

2 个答案: