html - 如何对齐三个 div(左/中/右)以在小屏幕左/右和它们下方的中心元素中对齐

Question

我有左-中-右三个 div，如果文档在移动设备中打开，我需要，

在一行中显示左右元素，并在其下方显示中心元素

我需要:

a) PC 

      [left] [ long text in center ] [right]

b) PC smaller screen !impartant!

      [left] [ long text     [right]
               in center ] 

c) Mobile (smaller then 736px )

      [left]  [right]
      [ text in center ]

我已经找到了 (a) 和 (c) 情况的解决方案，但它不适用于中间情况 (b)

看:http://jsfiddle.net/66fCm/692/

.wrap {
  text-align: center
}
.left {
  float: left;
  background: grey
}
.right {
  float: right;
  background: red
}
.center {
  text-align: left;
  background: green;
  margin: 0 auto !important;
  display: inline-block
}

<div class="wrap">
  <div class="left">
    left
  </div>
  <div class="right">
    right
  </div>
  <div class="center">
    center | Far far away, behind the word mountains, far from
  </div>
</div>

Answer 1

新的/更改的答案:

如果您更改如下所示的顺序并使用媒体查询，您可以在适用于大屏幕的 flexbox 和适用于较小屏幕的组合 float /非 float 场景之间切换，如下所示。

http://jsfiddle.net/fj6op9jb/

.wrap {
  display: flex;
}

.left {
  background: grey
}

.right {
  background: red;
  order: 2;
}

.center {
  background: green;
  margin: 0 auto !important;
}

@media (max-width: 500px) {
  .wrap {
    display: block;
    text-align: center;
  }
  .left {
    float: left;
  }
  .right {
    float: right;
  }
  .center {
    clear: both;
    display: inline-block;
    text-align: center;
  }
}

<div class="wrap">
  <div class="left">
    left
  </div>
  <div class="right">
    right
  </div>
  <div class="center">
    center | A collection of textile samples lay spread out on the table
  </div>
</div>