浮动2个元素离开，并在顶部有正确的一个？

Question

我有以下的CSS和HTML：

.row { 
 
    width: 100%; 
 
} 
 
.col { 
 
    float: left; 
 
    width: 45%; 
 
} 
 
@media screen and (max-width: 1300px) { 
 
    .col { 
 
    width: 100%; 
 
    } 
 
}

<div class="row"> 
 
    <div class="col"> 
 
    left 
 
    </div> 
 
    <!-- /.col --> 
 
    <div class="col"> 
 
    right 
 
    </div> 
 
    <!-- /.col --> 
 
</div> 
 
<!-- /.row -->

它的工作原理是当屏幕小于1300px他们与右顶部左边一个塌陷预期;我该如何让正确的一个最终在最左边？

Answer 1

您可以看看使用Flexbox的，或者告诉他们在媒体查询右浮动

.col { 
    float: left; 
    width: 45%; 
} 
@media screen and (max-width: 1300px) { 
    .col { 
     width: 100%; 
     float: right; 
    } 
} 

Answer 2

您可以使用显示：表和表头组：

.row { 
 
    width: 100%; 
 
    display: table; 
 
    table-layout: fixed; 
 
} 
 
.col { 
 
    display: table-cell; 
 
} 
 
@media screen and (max-width: 1300px) { 
 
    .col { 
 
    display: block; 
 
    } 
 
    .col + .col { 
 
    display: table-header-group; 
 
    background: gray; 
 
    } 
 
}

<div class="row"> 
 
    <div class="col"> 
 
    left 
 
    </div> 
 
    <!-- /.col --> 
 
    <div class="col"> 
 
    right 
 
    </div> 
 
    <!-- /.col --> 
 
</div> 
 
<!-- /.row -->

或挠曲

.row { 
 
    display: flex; 
 
} 
 
.col { 
 
    flex: 1; 
 
} 
 
@media screen and (max-width: 1300px) { 
 
    .row { 
 
    flex-direction: column; 
 
    } 
 
    .col { 
 
    order: 1; 
 
    } 
 
    .col + .col { 
 
    order: 0; 
 
    background: gray 
 
    } 
 
}

<div class="row"> 
 
    <div class="col"> 
 
    left 
 
    </div> 
 
    <!-- /.col --> 
 
    <div class="col"> 
 
    right 
 
    </div> 
 
    <!-- /.col --> 
 
</div> 
 
<!-- /.row -->