css - Bootstrap - 更改或似乎更改行布局

Question

我有一个这样布局的页面:

在较小的屏幕 (iPad) 上，我希望布局看起来像这样。我强调“外观”，因为我真正需要的是让 Div 3 坐在 Div 1 旁边，而 Div 2 似乎占据了整排:

我读过有关在列总和超过 12 的情况下使用行的信息 - 我可以在此处应用吗？任何帮助都会很棒!

Answer 1

在这些条件下可以实现您想要的布局:

• 您将所有 .col-* 作为同一父级 .row 的直接子级放置
• 包含div 3 的.col-* 是第二个 child ，具有float:right 和xs-hidden 类
• 最后一列是col-md-9 col-sm-12

概念验证:

.custom-layout>div:nth-child(2) {
  float: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="container">
  <div class="row custom-layout">
    <div class="col-sm-9">
      <div class="red-border">
      <h2>Column 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
    </div>
    <div class="col-sm-3 hidden-xs">
      <div>
         <h2> Column 3 </h2>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
      </div>
    </div>
    <div class="col-md-9 col-sm-12">
      <div>
        <h2>Column 2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
    </div>
  </div>
</div>