twitter-bootstrap Bootstrap - 更改行和列顺序

Question

提问by Sérgio

Using Bootstrap is it possible to have these two different layouts depending on the viewport? I've been searching about this and I'm aware of the concepts push, pulland responsive utilitiesbut the examples I've found had simpler structures.

使用 Bootstrap 是否可以根据视口拥有这两种不同的布局？我一直在搜索这个，我知道推、拉和响应实用程序的概念，但我发现的例子有更简单的结构。

On this case, I rather not use responsive utilities (because there would be lots of repeated processing) and/or JavaScript, just HTML and CSS manipulation.

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

Here's a fiddlewith the wrong layout on smartphones...

这是一个关于智能手机上错误布局的小提琴......

<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

平板电脑和台式机布局

Tablets and desktops layout

平板电脑和台式机布局

Smartphones layout

智能手机布局

enter image description here

在此处输入图片说明

Answer 1

采纳答案by Bhojendra Rauniyar

I found this question today and saw no such answer that would satisfy the OP and the future visitors of this post. Thus, decided to answer it with current bootstrap 4 version:

我今天发现了这个问题，但没有看到能让 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>

Here's the demo for bootstrap 4 row and column ordering. I hope, you'll be able to manage column ordering in bootstrap 3 as well if you are working on it.

这是bootstrap 4 行和列排序的演示。我希望，如果您正在处理它，您也能够在引导程序 3 中管理列排序。

Answer 2

回答by ppollono

There are 2 solutions without using Javascript

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

First Option:

第一个选项：

The element list is using Responsive Utilities Classes

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

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

Check this example: http://jsfiddle.net/ppollono/mehfb6p0/12/

检查这个例子：http: //jsfiddle.net/ppollono/mehfb6p0/12/

For the list in the first row

对于第一行的列表

class="visible-xs"

For the list at the bottom

对于底部的列表

class="hidden-xs"

CONTS: element list is duplicated

CONTS：元素列表重复

Second Option:

第二个选项：

Use Flex display

使用 Flex 显示

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

Check this example: http://codepen.io/Palapas/pen/LVvbyW?editors=110

检查这个例子：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: not supported by IE9 and below http://caniuse.com/#feat=flexbox

CONTS：IE9 及以下不支持http://caniuse.com/#feat=flexbox

Answer 3

回答by chaenu

Probably bit late to the party, but you can easily fix this with some lines of css and flexbox. I don't know if bootstrap provides something similar.

可能有点晚了，但是您可以使用一些 css 和 flexbox 行轻松解决此问题。我不知道 bootstrap 是否提供类似的东西。

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

.row > div {
    width: 100%;
}

.elA {
    order: 1;
}

.elB { 
    order: 2;
}

.elC {
    order: 3;
}

Example: https://jsfiddle.net/t284d3mg/

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

Flexbox is perfectly explained at MDN: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes

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

Be aware that older browser don't support flexbox, have an old specification implemented or that you need to add prefixes.

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

Answer 4

回答by Morten Pradsgaard

Is this what you are looking for? https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

这是你想要的？ https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

I use media queries all the time for that sort of things.

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

I can use it in two ways. first, define stylesheet:

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

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

Second, define media query in stylesheet:

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

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

Hope i didn't misunderstood your question :D

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

twitter-bootstrap Bootstrap - 更改行和列顺序

提问by Sérgio

采纳答案by Bhojendra Rauniyar

回答by ppollono

回答by chaenu

回答by Morten Pradsgaard

相关推荐

最近更新

标签

twitter-bootstrap Bootstrap - 更改行和列顺序

提问by Sérgio

采纳答案by Bhojendra Rauniyar

回答by ppollono

回答by chaenu

回答by Morten Pradsgaard

相关推荐

twitter-bootstrap jQuery Slick 轮播滑块同步不起作用

twitter-bootstrap 如何加快 Bootstrap 导航栏中的移动下拉菜单？

twitter-bootstrap Bootstrap 表单验证器不工作

twitter-bootstrap 在 twitter bootstrap modal 中动态加载谷歌地图

相关推荐

最近更新

标签