Question

我之前看过这个问题，但大多数人通常都希望从桌面出发：

[B] [A]

到（在移动设备上）：

[A]

[B]

所以他们这样做：

           <div class="container">

            <div class="row">
                <div class="col-sm-6 col-sm-push-6">
                    A
                </div>
                <div class="col-sm-6 col-sm-pull-6">
                    B
                </div>
            </div>


       </div> <!-- cointainer -->

但我真的想做（桌面）：

[B]

[A]

到手机：

[A]

[B]

我尝试添加像offset-lg和col-lg-12这样的东西，但由于某种原因它会让其中一个div消失：

           <div class="container">

            <div class="row">
                <div class="col-lg-12 col-lg-offset-12 col-sm-6 col-sm-push-6">
                    A
                </div>
                <div class="col-lg-12 col-sm-6 col-sm-pull-6">
                    B
                </div>
            </div>


       </div> <!-- cointainer -->

谢谢！

编辑：

尝试在不重复A或B的情况下完成此任务。

Answer 1

John Tomson ，你好。这是使用Bootstrap并使用hidden-xx类来实现此目的的一种方法这个演示有一个 Fiddle 。

这个演示代码也有像你在这里寻找的div块。

只需设置3个div并让其中两个div具有相同的内容，并在需要时显示/隐藏这2个div中的1个是我们如何在此处运行此示例。

enter image description here

＆＃13;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Starter Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<style>
body {
  padding-top: 50px;
}
.block {
  height: 200px;
  background-color: darkorange; 
}  
.block2 {
  height: 70px;
  background-color: blueviolet;
  margin-top: 2%;  
  margin-bottom: 2%;
      
} 
.center {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;  
}
    
@media(max-width:768px) {
.xs-view {
    color: white;
    text-decoration: underline;
}    
</style>

</head>

<body>

    <nav class="navbar navbar-inverse navbar-fixed-top ">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand " href="#">Project name</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <div class="container col-lg-12"><br><br></div>
    
    <div class="container col-lg-12">

        <div class="col-xs-10 col-xs-offset-1 col-sm-10 col-md-10 col-lg-4 col-lg-offset-4 block">
            <div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-8 col-md-offset-2 col-lg-8 col-lg-offset-2 text-center block2 hidden-xs xs-view ">
                <h3>B</h3>
            </div>  
            <div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-8 col-md-offset-2 col-lg-8 col-lg-offset-2 text-center block2 xs-view">
                <h3>A</h3>
            </div>
            <div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-2 col-lg-3 col-lg-offset-4 text-center block2 hidden-lg hidden-sm hidden-md xs-view">
                <h3>B</h3>
            </div>      
        </div>
         
    </div><!-- /.container -->


    <!-- Bootstrap core JavaScript -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    
</body>
</html>

＆＃13;

已添加到此帖

以下是 Fiddle 中的几个示例。

第二个选项使用推/拉，但它似乎有一个限制，它在断开前最多只能使用宽度的50％。
第二个选项还使用margin-top将div A 向下移动以允许 B 向上。

您可以在下面的图片中看到，第二个选项是垂直堆叠的，并且从头开始使用推/拉...有一些margin-top帮助。

第3个选项在此使用+/- margin-top来向下移动 A ，向上移动 B 。
我一直认为有一个问题是重新浏览器支持使用这样的负值，但看起来我可能错了这个 article 。（日期为2015年）

enter image description here

Answer 2

最简单的解决方案实际上是一个小jQuery：

if ($(window).width() < 767) {
   $("#b").insertBefore("#a");
}

HTML：

<div class="container">
  <div class="col-xs-12 bg-warning" id="a">A</div>
  <div class="col-xs-12 bg-danger" id="b">B</div>
</div>

https://jsfiddle.net/rohv33cd/

在Bootstrap BUT中更改堆叠顺序可以在移动设备和桌面设备上保持全宽？

2 个答案: