Bootstrap 3:折叠时更改 .col-X 元素的垂直顺序 [英] Bootstrap 3: Change vertical ordering of .col-X elements when collapsing

问题描述

我在大屏幕上的布局如下:

AAA BBBAAA CCC

(所有A、所有B、所有C组成一个div，所以这里有3个元素)

现在当它崩溃时我希望它变成

BBBAAAAAACCC

我尝试在 HTML 中按此顺序指定元素，但是我能设法为展开的视图获得的最好方法是(使用 .push-X 类)

AAA BBBAAACCC

我能想到的唯一解决方案是通过 JS 移动东西，或者在正确的位置复制 CCC 并根据视口大小显示和隐藏它们.

有没有更简洁的方法来做到这一点?

解决方案

<div class="col-xs-12 col-md-6 col-md-push-6">BBB</div><div class="col-xs-12 col-md-6 col-md-pull-6">AAA</div><div class="col-xs-12 col-md-6 ">AAA</div><div class="col-xs-12 col-md-6">CCC</div>

那行得通.

是怎么做的?...首先，您需要首先为移动设备安排内容(因此请考虑移动设备的自然"顺序，即

BBBAAAAAACCC

然后，当您扩展到桌面时，您会看到:

BBB AAA <--- 顺序错误AAA CCC

因此，您需要通过将BBB内容推到右侧，并将AAA内容拉到左侧来交换顺序

BBB------>..<------AAA

I have the following layout when on a large display:

AAA BBB
AAA CCC

(all A's, all B's, and all C's form one div, so there are 3 elements here)

Now when this collapses I want it to become

BBB
AAA
AAA
CCC

I tried specifying the elements in this order in the HTML, but then the best I could manage to get for the expanded view was (using .push-X classes)

AAA BBB
AAA
    CCC

The only solutions I can think of are moving things around by JS, or having duplicates of CCC at the correct position and showing and hiding them depending on viewport size.

Is there a cleaner way to do this?

解决方案

<div class="row">
   <div class="col-xs-12 col-md-6 col-md-push-6">BBB</div>
   <div class="col-xs-12 col-md-6 col-md-pull-6">AAA</div>
   <div class="col-xs-12 col-md-6 ">AAA</div>
   <div class="col-xs-12 col-md-6 ">CCC</div>
</div>

That will work.

How is it done?... Firstly you need to arrange your content first and foremost for mobile (so consider mobile the 'natural' order i.e.

BBB
AAA
AAA
CCC

Then, when you expand to desktop you'll get this:

BBB AAA  <--- wrong order
AAA CCC

So, you then need to swap the order by pushing the BBB content to the right, and pulling the AAA content to the left

BBB------>.
.<------AAA

这篇关于Bootstrap 3:折叠时更改 .col-X 元素的垂直顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！