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