Flexbox - 移动设备上的不同商品订单比在桌面上订购

Question

我正在尝试在kp.getPrivate().getAlgorithm(): ECDSA kp.getPublic().getAlgorithm(): ECDSA certificate.getPublicKey().getAlgorithm(): EC <--MISMATCH!? Why not ECDSA? IllegalArgumentException: Algorithm of private key does not match algorithm of public key in end certificate of entry (with index number: 0) 中建立一个自适应网站。

这就是我的网站在docs上的样子。

这就是我想要的big screens。

正如您所看到的，我的问题在于移动设备和桌面设备的不同顺序。

我的问题是：有可能吗？

Answer 1

这是我现在能想到的最好的布局：大屏幕和传统的传统浮动弯曲小屏幕重新排序。

＆＃13;

＆＃13;

* { box-sizing: border-box !important; }
    [class^="item-"] {
      background-color: blue;
      border: 3px solid white;
      color: white;
      float: left;
    }

    .item-1, .item-5, .item-6, .item-9 {
      float: none;
    }

    .item-2 {
      width: 33.33%;
      height: 300px;
    }

    .item-3, .item-4 {
      width: 33.33%;
      height: 200px;
    }

    .item-5 {
      height: 100px;
      overflow: hidden;
    }

    .item-7, .item-8 {
      width: 50%;
    }

    @media (max-width: 768px) {
      [class^="item-"] {
        float: none;
        width: initial;
        height: 50px;
      }

      .container {
        display: flex;
        flex-direction: column;
      }

      .item-5 {
        order: 1;
      }

      .item-2 {
        order: 2;
      }

      .item-6 {
        order: 3;
      }

      .item-7 {
        order: 4;
      }

      .item-8 {
        order: 5;
      }

      .item-9 {
        order: 6;
      }

      .item-3 {
        order: 7;
      }

      .item-4 {
        order: 8;
      }
    }

＆＃13;

<div class="container">
  <div class="item-1">item1</div>
  <div class="item-2">item2</div>
  <div class="item-3">item3</div>
  <div class="item-4">item4</div>
  <div class="item-5">item5</div>
  <div class="item-6">item6</div>
  <div class="item-7">item7</div>
  <div class="item-8">item8</div>
  <div class="item-9">item9</div>
</div>

＆＃13;

＆＃13;

＆＃13;