如何在具有多个弹性项目的弹性框中将元素浮动到右侧

问题描述

假设我有一个这样的flexBox设置：

<div class="flexBox">
    <div id="item-1"></div>
    <div id="item-2"></div>
    <div id="item-3"></div>
</div>

我目前已经使用CSS设置了flex项目，如下所示：

-------------------------------------------------
|    1     |            2           |     3     |
-------------------------------------------------

我希望项目在屏幕达到特定大小时更改为这种布局：

    --------------------
    |    3    |    1   |     
-----------------------------
|             2             |
-----------------------------

我知道我可以使用#item-3 {order:-1}将其移到开头，但是我遇到问题的部分是将元素1浮动到右边的2上方。

感谢您的帮助，谢谢！

解决方法

最小宽度是解决方案：

.flexbox {
      display: flex;
      flex-wrap: wrap;
    }
    .flexbox div {
      border: 1px solid #ddd;
      padding: 10px;
      box-sizing: border-box;
    }
    #item-1,#item-3 {flex: 1;}
    #item-2 {flex: 2;}
    @media(max-width: 768px) {
      #item-1,#item-3 {
        order: 1;
      }
      #item-2 {
        order: 2;
        border-top: 0;
        min-width: 100%;
      }
    }

    <div class="flexbox">
        <div id="item-1"></div>
        <div id="item-2"></div>
        <div id="item-3"></div>
    </div>