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

Question

是否可以将内容框的顺序配置为在引导程序中灵活，而不仅仅是每行的框数？以下是我试图实现的响应式布局。

在过去，我为不同的屏幕尺寸维护了不同的内容版本，但重写后有机会改变它的工作原理并引入更新的实践。

阻止 B 蓝色是公司名称和徽标，因此需要保留在顶部和中央，而 A 中的其他内容， C ， D 和 F 将落在 B 周围。块 E 本质上是页脚文本和小字体 - 版权声明和一些链接等。

如果使用Bootstrap布局无法做到这一点，请建议一个可以帮助我完成此任务的替代方案。

内容和布局要求（例如内容的外观）并不取决于我，我只是尝试遵循一些最佳做法，并使网站移动平板电脑和桌面浏览器友好，以便向前推进它将是维护起来比较简单。谢谢。

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。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用flexbox css模型。

在父div /元素赋值上： -

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

在基于您的订购的媒体查询中，在子元素上分配以下内容： -

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

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