Question

使用Bootstrap可以根据视口设置这两种不同的布局吗？我一直在寻找这个，我知道概念push, pull和responsive utilities，但我发现的例子有更简单的结构。

在这种情况下，我宁愿不使用响应式实用程序（因为会有很多重复处理）和/或JavaScript，只需要HTML和CSS操作。

Here's a fiddle智能手机布局错误......

<div class="row">
  <div class="col-sm-4 elA">Title A</div>
  <div class="col-sm-4 elB">Title B</div>
  <div class="col-sm-4 elC">Title C</div>

  <div class="col-sm-4 elA">Graph A</div>
  <div class="col-sm-4 elB">Graph B</div>
  <div class="col-sm-4 elC">Graph C</div>

  <div class="col-sm-12 elA">List A</div>
  <div class="col-sm-12 elB">List B</div>
  <div class="col-sm-12 elC">List C</div>
</div>

平板电脑和桌面布局

Tablets and desktops layout

智能手机布局

enter image description here

Answer 1

我今天发现了这个问题，并没有看到这样的答案，以满足OP和这篇文章的未来访客。因此，决定用当前的bootstrap 4版本来回答它：

<div class="row">
  <div class="col-12 col-md-4 order-1">
    <div class="m-3 bg-warning">Title A</div>
  </div>
  <div class="col-12 col-md-4 order-4 order-md-2">
    <div class="m-3 bg-success">Title B</div>
  </div>
  <div class="col-12 col-md-4 order-7 order-md-3">
    <div class="m-3 bg-info">Title C</div>
  </div>
  <div class="col-12 col-md-4 order-2 order-md-4">
    <div class="m-3 bg-warning">Graph A</div>
  </div>
  <div class="col-12 col-md-4 order-5 order-md-5">
    <div class="m-3 bg-success">Graph B</div>
  </div>
  <div class="col-12 col-md-4 order-8 order-md-6">
    <div class="m-3 bg-info">Graph C</div>
  </div>
  <div class="col-12 order-3 order-md-7">
    <div class="m-3 bg-warning">List A</div>
  </div>
  <div class="col-12 order-6 order-md-8">
    <div class="m-3 bg-success">List B</div>
  </div>
  <div class="col-12 order-9">
    <div class="m-3 bg-info">List C</div>
  </div>
</div>

这是demo for bootstrap 4 row and column ordering。我希望，如果您正在处理它，您将能够在bootstrap 3中管理列排序。

Answer 2

有两种不使用Javascript的解决方案

第一个选项：

元素列表正在使用响应实用程序类

http://getbootstrap.com/css/#responsive-utilities

检查此示例： http://jsfiddle.net/ppollono/mehfb6p0/12/

对于第一行中的列表

class="visible-xs"

对于底部的列表

class="hidden-xs"

CONTS：元素列表重复

第二个选项：

使用Flex显示

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes

检查此示例： http://codepen.io/Palapas/pen/LVvbyW?editors=110

.row {
  margin: 0px;
  padding: 0px;
  background: #999;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
.row div {
  padding: 5px;
  margin: 5px;
  border: 1px solid #000;
  border-radius: 3px;
  width: 100%;
}
.elA {
  background-color: #E99048;
}
.elB {
  background-color: #B0C07E;
}
.elC {
  background-color: #B0B9DC;
}
@media (min-width: 768px) {
  .row .et {
    -webkit-order: 1;
    order: 1;
    width: 30%;
  }
  .row .eg {
    -webkit-order: 2;
    order: 2;
    width: 30%;
  }
  .row .el {
    -webkit-order: 3;
    order: 3;
  }
}

<div class="row">
  <div class="et elA">Title A: Integer et fermentum leo. In sollicitudin arcu eget nisi pretium.</div>
  <div class="eg elA">Graph A: Integer et fermentum leo. In sollicitudin arcu eget nisi pretium, viverra rutrum neque malesuada. Cras maximus nibh quis ex varius feugiat. Ut nec arcu nunc.
  </div>
  <div class="el elA">List A
    <br>
    <ul>
      <li>Sed adipiscing ornare risus. Morbi est est, blandit sit amet, sagittis vel, euismod vel, velit. Pellentesque egestas sem. Suspendisse commodo ullamcorper magna.</li>
      <li>Nulla sed leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</li>
      <li>Fusce lacinia arcu et nulla. Nulla vitae mauris non felis mollis faucibus.</li>
      <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</li>
      <li>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</li>
      <li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li>
      <li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li>
      <li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</li>
      <li>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</li>
    </ul>
  </div>
  <div class="et elB">Title B: Integer et fermentum leo.
  </div>
  <div class="eg elB">Graph B</div>
  <div class="el elB">List B
    <br>
    <ul>
      <li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li>
      <li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li>
      <li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</li>
      <li>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</li>
      <li>Sed adipiscing ornare risus. Morbi est est, blandit sit amet, sagittis vel, euismod vel, velit. Pellentesque egestas sem. Suspendisse commodo ullamcorper magna.</li>
      <li>Nulla sed leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</li>
      <li>Fusce lacinia arcu et nulla. Nulla vitae mauris non felis mollis faucibus.</li>
      <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</li>
      <li>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</li>
      <li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li>
      <li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li>
      <li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</li>
      <li>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</li>
      <li>Sed adipiscing ornare risus. Morbi est est, blandit sit amet, sagittis vel, euismod vel, velit. Pellentesque egestas sem. Suspendisse commodo ullamcorper magna.</li>
      <li>Nulla sed leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</li>
      <li>Fusce lacinia arcu et nulla. Nulla vitae mauris non felis mollis faucibus.</li>
    </ul>
  </div>
  <div class="et elC">Title C: Integer et fermentum leo. In sollicitudin arcu eget nisi pretium, viverra rutrum neque malesuada. Cras maximus nibh quis ex varius feugiat.</div>
  <div class="eg elC">Graph C</div>
  <div class="el elC">List C
    <br>
    <ul>
      <li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li>
      <li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li>
      <li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet,
    </ul>
  </div>
</div>

CONTS：IE9及http://caniuse.com/#feat=flexbox

以下不支持

Answer 3

可能有点迟到了，但你可以通过一些css和flexbox来轻松解决这个问题。我不知道bootstrap是否提供类似的东西。

.row {
    display: flex;
    flex-flow: row wrap;
}

.row > div {
    width: 100%;
}

.elA {
    order: 1;
}

.elB { 
    order: 2;
}

.elC {
    order: 3;
}

示例：https://jsfiddle.net/t284d3mg/

在MDN上完美地解释了Flexbox：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes

请注意旧浏览器不支持flexbox，实施旧规范或需要添加前缀。

Answer 4

这是你在找什么？ https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

我一直在使用媒体查询来处理这类事情。

我可以用两种方式使用它。首先，定义样式表：

<link rel="stylesheet" media="screen and (max-device-width: 799px)" />

其次，在样式表中定义媒体查询：

@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... }

希望我没有误解你的问题：D

Bootstrap - 更改行和列顺序

4 个答案: