如何处理float元素的顺序？

Question

这是我的代码：

＆＃13;

＆＃13;

.wrapper {
    border: 1px solid red;
    padding-left: 20px;
}

.table {
  display: table;
  width: 100%;
}

.table > div {
  display: table-cell;
  border: 1px solid green;
  min-width: 190px;
}

@media screen and (max-width: 600px) {
  .table > div {
  float:left;
}
  .author, .editor{
     clear: both;
  }
}

＆＃13;

<div class="wrapper">    

<div class="table">
  <div class="share_edit_flag">
    <span>share</span>
    <span>edit</span>
    <span>close</span>
  </div>

  <div class="editor">
    <a href="#">edited May 21 16 at 11:58</a>
    <div class="profile">
      <img src="#" />
      <a href="#">Rory O'Kane</a>
      <b>12.6k</b>
      <!-- I don't have any badge in my website -->
    </div>
  </div>

  <div class="author">
    <a href="#">asked May 21 16 at 11:51</a>
    <div class="profile">
      <img src="#" />
      <a href="#">vasanthkumarmani</a>
      <b>1</b>
      <!-- I don't have any badge in my website -->
    </div>
  </div>
</div>

</div>

＆＃13;

＆＃13;

＆＃13;

请将上面的代码段作为完整尺寸运行，然后调整屏幕大小。当您缩小屏幕尺寸时，您会看到author和editor框彼此跳下。好的都好。

目前，正如您所见，框的（最多向下）首先是editor，author位于其下方。现在我想反过来。我的意思是，我想将author框放在editor框的顶部。我怎么能这样做？

注意：我想保持当前订单的全屏尺寸（作者框应该是最右边的）

Answer 1

我建议您使用flexbox而不是浮点数。使用flexbox和order属性很容易实现：

＆＃13;

＆＃13;

.wrapper {
    border: 1px solid red;
    padding-left: 20px;
}

.table {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.table > div {
  border: 1px solid green;
  min-width: 190px;
}

@media screen and (max-width: 600px) {
  .author {
      order: 1;
  }
  
  .editor {
    order: 2;
  }
}

＆＃13;

<div class="wrapper">    

<div class="table">
  <div class="share_edit_flag">
    <span>share</span>
    <span>edit</span>
    <span>close</span>
  </div>

  <div class="editor">
    <a href="#">edited May 21 16 at 11:58</a>
    <div class="profile">
      <img src="#" />
      <a href="#">Rory O'Kane</a>
      <b>12.6k</b>
      <!-- I don't have any badge in my website -->
    </div>
  </div>

  <div class="author">
    <a href="#">asked May 21 16 at 11:51</a>
    <div class="profile">
      <img src="#" />
      <a href="#">vasanthkumarmani</a>
      <b>1</b>
      <!-- I don't have any badge in my website -->
    </div>
  </div>
</div>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用flexbox更改order。

.wrapper {
  border: 1px solid red;
  padding-left: 20px;
}

.table {
  display: table;
  width: 100%;
}

.table > div {
  display: table-cell;
  border: 1px solid green;
  min-width: 190px;
}

@media screen and (max-width: 600px) {
  .table {
    display: flex;
    flex-direction: column;
  }
  .author {
    order: -1;
  }
}

<div class="wrapper">

  <div class="table">
    <div class="share_edit_flag">
      <span>share</span>
      <span>edit</span>
      <span>close</span>
    </div>

    <div class="editor">
      <a href="#">edited May 21 16 at 11:58</a>
      <div class="profile">
        <img src="#" />
        <a href="#">Rory O'Kane</a>
        <b>12.6k</b>
        <!-- I don't have any badge in my website -->
      </div>
    </div>

    <div class="author">
      <a href="#">asked May 21 16 at 11:51</a>
      <div class="profile">
        <img src="#" />
        <a href="#">vasanthkumarmani</a>
        <b>1</b>
        <!-- I don't have any badge in my website -->
      </div>
    </div>
  </div>

</div>