Question

我正在使用Bootstrap网格，如下所示：

<div class="row">
  <div class="col-md-6 col-sm-12"> Column A </div>
  <div class="col-md-6 col-sm-12"> Column B </div>
</div>

这显然在左侧显示A列，在右侧显示B列。当移动到较小的屏幕时，它将是A在顶部，B在下面。

有没有办法在较大的屏幕上保持左边的A和右边的B，但是在小屏幕上让B在顶部和A在下面？

谢谢。

Answer 1

您可以使用Bootstrap Push and Pull。

＆＃13;

body,
html {
  padding-top: 50px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container text-center">
  <div class="row">
    <div class="col-md-6 col-md-push-6">
      <div class="alert alert-info">B</div>
    </div>
    <div class="col-md-6 col-md-pull-6">
      <div class="alert alert-danger">A</div>
    </div>
  </div>
</div>

＆＃13;

Answer 2

 <div class="row">
    <div class="col-lg-6 col-md-6 hidden-sm hidden-xs"> Column A </div>
    <div class="col-md-6 col-sm-12"> Column B </div>
    <div class="col-sm-12 col-xs-12 hidden-lg hidden-md"> Column A </div>
</div>

你可以在B之后添加一个重复的列。当屏幕为sm或xs时隐藏第一个A. 当屏幕为lg或md时隐藏第二个A.

xs

2 个答案: