Question

我正试图让我的2个div（并排）在移动设备上观看时更改为堆叠的div，如小提琴中所示，但我希望“两个在顶部，”一个“在第二个

function DropDown(el) {
            this.dd = el;
            this.placeholder = this.dd.children('span');
            this.opts = this.dd.find('ul.dropdown > li');
            this.val = '';
            this.index = -1;
            this.initEvents();
        }
        DropDown.prototype = {
            initEvents : function() {
                var obj = this;

                obj.dd.on('click', function(event){
                    $(this).toggleClass('active');
                    return false;
                });

                obj.opts.on('click',function(){
                    var opt = $(this);
                    obj.val = opt.text();
                    obj.index = opt.index();
                    obj.placeholder.text(obj.val);
                });
            },
            getValue : function() {
                return this.val;
            },
            getIndex : function() {
                return this.index;
            }
        }

        $(function() {

            var dd = new DropDown( $('#dd') );

            $(document).click(function() {
                // all dropdowns
                $('.wrapper-dropdown').removeClass('active');
            });

        });

$(document).ready(function(){

    $.ajaxSetup({cache:false});
    $(".post-link").click(function(){
        var post_link = $(this).attr("href");

        $("#single-post-container").html("Chargement du menu");
        $("#single-post-container").load(post_link);
    return false;
    });

        });

.one {
  border: 1px solid green;
  width: 29%;
  float: left;
  height: 100px;
}

.two {
  border: 1px solid blue;
  width: 69%;
  float: right;
  height: 100px;
}

@media (max-width: 767px) {
  .one {
    width: 100%;
  }
  .two {
    width: 100%;
  }
}

我知道简单的解决方案是交换第一个和第二个div，但由于我的代码很复杂，我希望只使用CSS有一个更简单的解决方案。

Answer 1

<强>更新

在下面添加了一个flexbox方法：

的 UPATED JSFIDDLE

＆＃13;
＆＃13;
.wrap { display: flex; } .one { width: 30%; border: 1px solid green; } .two { width: 70%; border: 1px solid blue; } @media (max-width: 767px) { .wrap { flex-direction: column-reverse; } .one, .two { width: auto; } }
＆＃13;
<div class="wrap"> <div class="one">1</div> <div class="two">2</div> </div>
＆＃13;
＆＃13;
＆＃13;

原始回答

如果你仍然坚持使用标记，你仍然可以使用魔术css表格布局来改变2个div的顺序。我更新了所有内容，只是为了保持一致性。

这些display值的工作原理来自MDN：


display: table; - 表现得像<table>元素。

display: table-cell; - 表现得像<td>元素。

display: table-header-group; - 表现得像<thead>元素。

display: table-footer-group; - 表现得像<tfoot>元素。

的 UPDATED JSFIDDLE

＆＃13;
＆＃13;
.wrap { display: table; border-collapse: collapse; width: 100%; } .one, .two { display: table-cell; } .one { width: 30%; border: 1px solid green; } .two { width: 70%; border: 1px solid blue; } @media (max-width: 767px) { .one { display: table-footer-group; width: 100%; } .two { display: table-header-group; width: 100%; } }
＆＃13;
<div class="wrap"> <div class="one">1</div> <div class="two">2</div> </div>
＆＃13;
＆＃13;
＆＃13;

Answer 2

考虑到你不想交换它们。这是小提琴：https://jsfiddle.net/c8x49afg/ 只需使用位置相对于div拉动第二个并向下推动第一个。

HTML

<div class="wrapper">
<div class="one" >
one    
</div>


<div class="two">
    two
</div>
</div>

CSS

.wrapper {
}
.one{
    border: 1px solid green;
    width: 29%;
    float:left;
    height:100px;
}


.two{
    border: 1px solid blue;
    width:69%;
    float:right;
    height:100px;
}

@media (max-width:767px) { 
    .one{
        position:relative;
        top:110px;
        width:100%;
}
    .two{
        position:relative;
        top:-100px;
        width:100%;
}
}

Answer 3

在企业CMS中工作时，我需要做到这一点，因为无法在移动设备上更改源订单。

我使用的解决方案是为两个Div设置一个通用容器，并将其显示为表格。然后，您可以将要首先显示的Div设置为display:table-group-header，并将其显示为display:table-group-footer之后显示的

如果你想保留彩色边框，你可能需要为每个保留内容的内部div引入。

我创建了一个小提琴，展示了它的实际效果： http://jsfiddle.net/0brc4xc7/

如何在移动设备上并排改变堆叠？

3 个答案: