Question

我尝试使用适用于桌面和移动设备中所有主要浏览器的jsfiddle移动/平板电脑视图中的Twitter引导程序切换两个div的列手机（android和ios）

如何使用twitter bootstrap或CSS执行此操作？我尝试过上面提到的JSfiddle，但它不能在手机中工作，需要在firefox中配置一些设置才能运行它。

Answer 1

哪些手机/浏览器不起作用？

如果添加某些特定于供应商的属性，该怎么办？似乎在这里工作：

http://jsfiddle.net/ivanchaer/8vy8khnq/2/

HTML

Resize this window until the divs switch places.
<div class="wrapper">
    <div id="first_div" class="col">first div</div>
    <div id="second_div" class="col">second div</div>
</div>
<a>Link</a>

CSS

.wrapper {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
.col {
    width: 100px;
    float: left;
    border: 1px solid black;
    padding: 5px;
    /*flex-grow: 1;*/
}
#first_div {
    background: yellow;
    height: 200px;
}
#second_div {
    background: cyan;
    height: 100px;
}
@media (max-width: 400px) {
    .wrapper {
        -webkit-box-orient: horizontal;
        -moz-box-orient: horizontal;
        -webkit-box-direction: reverse;
        -moz-box-direction: reverse;
        -webkit-flex-direction: row-reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
        justify-content: flex-end;
    }
}

Answer 2

使用media规则

@media screen and (max-width: 480px) {
    .container {
        float: left; // or something
    }
}

Answer 3

由于 display：flex 在主要浏览器中不支持而引起的问题。

通过在媒体查询中使用 float 属性，您可以轻松实现此目的。

  @media (max-width: 400px) {
    .col {
       float: right;
    }
}

enter link description here

在响应式设计中切换两个div

3 个答案: