Question

我试图让“文件”和“其他东西”低于“通话详情”而不触及“帐户详细信息”，就像这样;

|--------------|-----------------|
|CALL DETAILS  | ACCOUNT DETAILS |
|1             |1                |
|2             |2                |
|--------------|3                |
|FILES         |-----------------|
|1             |
|--------------|
|SOMETHING ELSE|
|--------------|

但是我也希望他们所有人都以'row-xs-12'的方式在每个人之间崩溃，但是按照特定的顺序排列;电话详情，账户详情，文件，有些东西......像这样;

|---------------|
|CALL DETAILS   |
|1              |
|2              |
|---------------|
|ACCOUNT DETAILS|
|1              |
|2              |
|3              |
|---------------|
|FILES          |
|1              |
|---------------|
|SOMETHING ELSE |
|---------------|

任何人都可以帮助我获取正确的列和行吗？

Answer 1

您可以使用媒体查询float:right＆＃34;帐户详情＆＃34;仅在更大的屏幕上..

@media (min-width:768px) {
  .pull-right-md {
    float:right;
  }
}

http://codeply.com/go/y0mvkmZF98

注意：即将推出的Bootstrap 4将包含responsive floats（即pull-md-right）这类行为，因此您不需要自定义CSS类：http://codeply.com/go/OcF6HGnHOj

Answer 2

jQuery版本：

HTML：

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <div class="call-details">Call details</div>
      <div class="files">Files</div>
      <div class="something-else">Something else</div>
    </div>
    <div class="col-sm-6">
      <div class="account-details">Account details</div>
    </div>
  </div>
</div>

JS：

var accountDetails = $('.account-details'),
    accountDetailsParent = accountDetails.parent(),
    callDetails = $('.call-details');

$(window).resize(function() {
  if ($(this).width() < 768) {
    callDetails.after(accountDetails);
  } else {
    accountDetailsParent.append(accountDetails)
  }
});

$(window).trigger('resize');

JSFIDDLE

Answer 3

这样的东西，非常具体（如果你想把你的内容集中在一起，你可能想要添加一些偏移量）：

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-6">
      <p>Call details</p>
    </div>
    <div class="col-xs-12 col-sm-6">
      <p>Account details</p>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12">
      <p>Files</p>
    </div>
    <div class="col-xs-12">
      <p>Something else</p>
    </div>
  </div>
</div>

Twitter Bootstrap 3 - 网格设计 - 移动列/行

3 个答案:

JSFIDDLE