Question

我的移动设备布局如下..

    +------------------------+
    | (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     |
+------------------------+

这可能吗？

Answer 1

我的工作是在特定的窗口宽度（{1}}替换特定窗口宽度的div（我的示例为700px，根据引导媒体查询设置如下）。

.replaceWith()

Result here用于宽屏幕。

由于时间不够，我没有添加@media(max-width:767px){} @media(min-width:768px){} @media(min-width:992px){} @media(min-width:1200px){}功能;所以你需要每次刷新屏幕以查看效果，here

HTML

.resize()

CSS

<div class="container">
    <div class="row">
        <div class="col-sm-6 0ne">1</div>
        <div class="col-sm-6 two">2</div>
        <div class="col-sm-6 three">3</div>
        <div class="col-sm-6 four">4</div>
        <div class="col-sm-6 five">5</div>
        <div class="col-sm-6 six">6</div>
        <div class="col-sm-6 seven">7</div>
        <div class="col-sm-6 eight">8</div>
    </div>
</div>

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

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

Answer 2

实现这一目标的最简单方法是将内容复制到2个块中。第一个块将在超小型，中小型设备（1 div / line）上可见，另一个块将在大型设备（2 div / line）上可见。

结果here
代码here

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

这不是一个优化的解决方案，但在许多情况下它非常有用。我使用这个解决方案和bootstrap。

使用引导程序更改列布局

2 个答案: