Bootstrap 3 两个响应行并排？答案

【问题标题】：Bootstrap 3 two responsive rows next to each other?Bootstrap 3 两个响应行并排？
【发布时间】：2017-02-06 06:45:25
【问题描述】：

我正在使用 Bootstrap 3 并试图解决这个图像上被嘲笑的问题。我使用了一行和两个列，它们像图像中一样彼此相邻，但是当我调整到移动设备的大小时，我希望右侧落在左侧下方。任何帮助表示赞赏，谢谢。

代码示例：

<div className="container">
  <div className="row">
    <div className="col-xs-4 col-offset-xs-1">
     <h1>1</h1>
  </div>
  <div className="col-xs-4">
    <div className="row">
      <h1>2</h1>
    </div>
  </div>

【问题讨论】：

代码示例在哪里？

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

Bootstrap 允许轻松嵌套您的元素，在这里：https://jsfiddle.net/denea/DTcHh/25594/

      <div className="container">
          <div class="row">
            <div class="col-sm-6 col-xs-12" id="first">
               <h1>1</h1>
            </div>
            <div class="col-sm-6 col-xs-12" id="second">
              <div class="row">
                <h1>2</h1>
              </div>
              <div class="row">
                <h1>3</h1>
              </div>
              <div class="row">
                <h1>4</h1>
              </div>
            </div>
     </div>

并阅读：http://getbootstrap.com/css/#grid-nesting

【讨论】：

【解决方案2】：

.black{background-color:#000; height:320px;}
.red{background-color:#F00; height:100px;margin-bottom:10px;}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-xs-6">
      <div class="row">
        <div class="col-xs-12 black">
          black
        </div>
       </div>
     </div>
    <div class="col-xs-6">
      <div class="row">
        <div class="col-xs-12 red">
          one
        </div>
       </div>
      <div class="row">
        <div class="col-xs-12 red">
          two
        </div>
       </div>
      <div class="row">
        <div class="col-xs-12 red">
          three
        </div>
       </div>
     </div>
    </div>
  </div>

【讨论】：

对于 xs 屏幕，它不会移动 容器的右半部分。
基本上只是复制并粘贴了我的答案并添加了一些 CSS，干得好！
我正在写这段 html 时没有答案，别傻了。哦，还有……你使用的是 sm，所以在 xs 尺寸下它会破裂，在第一个尺寸下移动到右半部分。干杯！
这不是嫉妒，而是提供错误和复制的答案，仅此而已。
没有错，没有复制，如您所见，它是带有引导程序的基本结构。如果他们最终在 sn-p 生成器上添加智能感知，我可以快速编写它，对吧？下次我会在我的 IDE 上写代码并粘贴代码以避免你的小 cmets ;)

【解决方案3】：

您可以通过使用 flexbox 和媒体查询来实现这一点

 @media (max-width: 360px) {
    .container > .row {
          display:flex;
          flex-flow: row-reverse wrap;
    }
 }

演示：https://jsfiddle.net/xs3joev8/1/

【讨论】：

【解决方案4】：

Bootstrap 允许嵌套，这将提供您所需要的：

<div class="row">
  <div class="col-sm-6">
    Left column
  </div>
  <div class="col-sm-6">
    <div class="row">
      <div class="col-sm-12">
        Right column, row 1
      </div>
    </div>
    <div class="row">
      <div class="col-sm-12">
        Right column, row 2
      </div>
    </div>
    <div class="row">
      <div class="col-sm-12">
        Right column, row 3
      </div>
    </div>
  </div>
</div>

More info here.

【讨论】：