css - 在 768px 断点上，先移动右列，然后移动下方的左列

Question

我能够使用推拉方法进行源排序。但是整个右栏位于左栏之上。我想要实现的目标显示在随附的屏幕截图中。如果在 768px 断点后我想要订单的地方有解决办法，请指导我

Answer 1

如果 large-4 上有已知高度，您可以使用 float 方法和伪元素，将第一个元素向下推，以便为第二个元素留出空间。<强> DEMO :

@media only screen and (max-width: 767px) {
    .row:before {
        content:'';
        float:right;
        height:1.2em;
        width:0;
        margin-left:-0.25em;
    }
    .large-8 {
        clear:right;
        float:right;
    }
    .large-4 {
        float:none!important;
    }
}

---

如果您不介意离开旧版浏览器，您可以使用自然的 flex 方法: DEMO

@media only screen and (max-width: 767px) {
    .row{
        display:flex;
        flex-direction:column;
    }
    .large-8 {
        order:2;
    }
}