CSS

Question

是否可以在 bootstrap 中灵活配置内容框的顺序，而不仅仅是每行的框数？以下是我正在努力实现的响应式布局。

过去，我为不同的屏幕尺寸维护了单独的内容版本，但随着重写，我有机会改变它的工作方式并引入诸如此类的新做法。

如果 Bootstrap 布局无法做到这一点，请提出一个可以帮助我完成此操作的替代方案。

内容和布局要求（例如内容的外观）不由我决定，我只是想遵循一些最佳实践，将网站制作成移动平板电脑和台式机 browser-friendly 以便向前推进维护起来会更简单。谢谢。

Answer 1

我已尝试实施您的示例以表明可以使用 Bootstrap 的列排序类来完成此操作，例如col-md-push-4 和 col-md-pull-4.

这仅在框具有相同高度时有效，请尝试将 .box--high 添加到框 A 以查看如果不是这种情况可能会出现什么样的问题.这些问题可以通过嵌套 Bootstrap 的网格类来解决，但是您还需要复制一些框并使用例如特定的布局尺寸显示或隐藏它们。 .hidden-xs.

如果您不需要支持旧版浏览器（IE9 和 IE10），

Flexbox (display: flex) 可能是一个选项。参见 Can I Use。

.box {
  background-color: #d1d1d1;
  margin-bottom: 15px;  
  border-radius: 10px;
  color: #fff;
  font-size: 24px;
  line-height: 3em;
  text-align: center;
}

.box.box--blue {
  background-color: #9CCCE8;
}

.box.box--high {
  height: 5em;
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-4 col-md-push-4">
      <div class="box box--blue">B</div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-md-pull-4">
      <div class="box">A</div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4">
      <div class="box">C</div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4">
      <div class="box">D</div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-md-push-4">
      <div class="box">F</div>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-4 col-md-pull-4">
      <div class="box">E</div>
    </div>
  </div>
</div>

Answer 2

你可以使用 flexbox css 模型。

在父 div/element 分配：-

parentElement {
  display: flex; /* or inline-flex */
}

在基于您的排序的媒体查询中，为子元素分配以下内容：-

childElement {
   order: 3; /*any integer*/
}

@media (max-width: 900px) {
   childElement {
   order: 1; /*any integer*/
   }
}

CSS - 布局顺序和每行的列数是否可以响应？

CSS - Can the order of layout be responsive aswell as the number of columns per row?

html

responsive-design

twitter-bootstrap