Question

我有四列我希望在中型设备上显示为两行（两行），在小型设备上显示四行。问题是内容需要垂直排列，以便中型设备上的列排列如下：

ONE
TWO
THREE
FOUR

以及像这样的小型设备：

<div class="container">
  <div class="row">
    <div class="col-md-6">ONE</div>
    <div class="col-md-6">TWO</div>
    <div class="col-md-6">THREE</div>
    <div class="col-md-6">FOUR</div>
  </div>
</div>

我无法使用col-sm-push- *类或我从研究中尝试过的任何其他技巧来完成所需的布局。在我看来，这应该是一件简单的事情，但我感到很困惑。

nodePort

Answer 1

你想要像这样嵌套DIV ..

http://www.codeply.com/go/G7D6WvVIqZ

    <div class="row">
        <div class="col-sm-6">
            <div class="col-sm-12">ONE</div>
            <div class="col-sm-12">TWO</div>
        </div>
        <div class="col-sm-6">
            <div class="col-sm-12">THREE</div>
            <div class="col-sm-12">FOUR</div>
        </div>
    </div>

Answer 2

使用嵌套对<div>进行分组。

这是一个例子： https://jsbin.com/yawoka/edit?html,output

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Example</title>
</head>
<body>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <div class="container">
    <div class="row">
      <div class="col-xs-6 col-sm-12">
        <div class="col-sm-6">ONE</div>
        <div class="col-sm-6">TWO</div>
      </div>  
      <div class="col-xs-6 col-sm-12">
        <div class="col-sm-6">THREE</div>
        <div class="col-sm-6">FOUR</div>
      </div>
    </div>
  </div>
</body>
</html>

Answer 3

您可以使用jQuery的npm install函数：

babel --version

以下是工作链接：http://jsfiddle.net/wVVbT/171/

bootstrap列顺序和包装

3 个答案: