Twitter bootstrap 3 使用引导更改列布局

我的手机布局如下

    +------------------------+
    | (col-md-6)   Div 1     |
    +------------------------+
    | (col-md-6)   Div 2     |
    +------------------------+
    | (col-md-6)   Div 3     |
    +------------------------+
    | (col-md-6)   Div 4     |
    +------------------------+
    | (col-md-6)   Div 5     |
    +------------------------+
    | (col-md-6)   Div 6     |
    +------------------------+
    | (col-md-6)   Div 7     |
    +------------------------+

当屏幕变宽或进入平板电脑时，布局会按预期发生变化

+------------------------+------------------------+
| (col-md-6)   Div 1     | (col-md-6)   Div 2     |
+------------------------+------------------------+
| (col-md-6)   Div 3     | (col-md-6)   Div 4     |
+------------------------+------------------------+
| (col-md-6)   Div 5     | (col-md-6)   Div 6     |
+------------------------+------------------------+
| (col-md-6)   Div 7     |
+------------------------+        

但我希望布局看起来像

+------------------------+------------------------+
| (col-md-6)   Div 1     | (col-md-6)   Div 5     |
+------------------------+------------------------+
| (col-md-6)   Div 2     | (col-md-6)   Div 6     |
+------------------------+------------------------+
| (col-md-6)   Div 3     | (col-md-6)   Div 7     |
+------------------------+------------------------+
| (col-md-6)   Div 4     |
+------------------------+        

---

这可能吗？

我所做的是将div替换为。替换为特定窗口宽度700px。对于我的示例，根据如下引导媒体查询将其设置为

@media(max-width:767px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}

用于宽屏幕

由于时间不够，我没有添加。调整大小功能；所以你每次都需要刷新屏幕才能看到效果

HTML

jquery//如果可以，请缩短代码，我使用基本jquery，因为我是新手

one = $('.one');
two = $('.two');
three = $('.three');
four = $('.four');
five = $('.five');
six = $('.six');
seven = $('.seven');
eight = $('.eight');

tone = one.clone();
ttwo = two.clone();
tthree = three.clone();
tfour = four.clone();
tfive = five.clone();
tsix = six.clone();
tseven = seven.clone();
teight = eight.clone();



if ($(window).width() > 700) {
    two.replaceWith(tfive);
    three.replaceWith(ttwo);
    four.replaceWith(tsix);
    five.replaceWith(tthree);
    six.replaceWith(tseven);
    seven.replaceWith(tfour);
}

---

实现这一点最简单的方法是将内容复制到两个块中。第一个块将在超小型、小型和中型设备1 div/线上可见，另一个块将在大型设备2 div/线上可见

后果 密码

---

这不是一个优化的解决方案，但它在许多情况下都非常有用。我经常将此解决方案与引导一起使用。

是的。我给你贴了一个答案。有帮助吗？

.col-sm-6 {
    background:grey;
}

one = $('.one');
two = $('.two');
three = $('.three');
four = $('.four');
five = $('.five');
six = $('.six');
seven = $('.seven');
eight = $('.eight');

tone = one.clone();
ttwo = two.clone();
tthree = three.clone();
tfour = four.clone();
tfive = five.clone();
tsix = six.clone();
tseven = seven.clone();
teight = eight.clone();



if ($(window).width() > 700) {
    two.replaceWith(tfive);
    three.replaceWith(ttwo);
    four.replaceWith(tsix);
    five.replaceWith(tthree);
    six.replaceWith(tseven);
    seven.replaceWith(tfour);
}

<section class="hidden-lg">
    <div class="col-md-12">Div 1</div>
    <div class="col-md-12">Div 2</div>
    <div class="col-md-12">Div 3</div>
    <div class="col-md-12">Div 4</div>
    <div class="col-md-12">Div 5</div>
    <div class="col-md-12">Div 6</div>
    <div class="col-md-12">Div 7</div>
</section>

<section class="visible-lg">
    <div class="col-lg-6">Div 1</div>
    <div class="col-lg-6">Div 5</div>
    <div class="col-lg-6">Div 2</div>
    <div class="col-lg-6">Div 6</div>
    <div class="col-lg-6">Div 3</div>
    <div class="col-lg-6">Div 7</div>
    <div class="col-lg-6">Div 4</div>
</section>