向左浮动2个元素并在顶部有正确的元素？

Question

我有以下CSS和HTML：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

当屏幕小于1300px时它会按预期工作，它们会在左侧顶部折叠时折叠;如何将正确的一端放在左侧？

Answer 1

您可以查看使用Flexbox，也可以告诉他们在媒体查询中浮动

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

Answer 2

您可以使用display：table和table-header-group：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

或flex

＆＃13;

＆＃13;

*.js

＆＃13;

    link_to 'New' new_item_path(t)

＆＃13;

＆＃13;

＆＃13;