Question

我希望在正常宽度下使用Bootstrap网格创建此订单 [3][2][1]在移动视图中显示为

[1]
[2]
[3]

我无法使用RTL Bootstrap，因为这会在我的页面中破坏其他jquery元素的样式感谢名单

Answer 1

自己找到答案

<div class='col-md-4 col-md-push-8 col-xs-12'>
[1]
</div>
<div class='col-md-4 col-md-offset-0 col-xs-12'>
[2]
</div>
<div class='col-md-4 col-md-pull-8 col-xs-12'>
[3]
</div>

Answer 2

或者你可以使用css flex和媒体查询（http://codepen.io/Kebten/pen/bdBPRe）： - ）

.grid {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-around;
}

@media (max-width:768px) {
  .grid {
    flex-direction: column; 
  }
}

<div class="grid">
  <div>
    [1]
  </div>
  <div>
    [2]
  </div>
  <div>
    [3]
  </div>
</div>

有关flex的其他有用功能的信息，请参阅https://css-tricks.com/snippets/css/a-guide-to-flexbox/

具有特殊顺序的Bootstrap网格

2 个答案: