felxで順番を入れ替えたい

PCとSP時で順番を入れ替えたいです。

理想

現実


<style>

  .container{
    background:red;
    opacity:.6;
    display:flex;
  }
  .num01 ,.num02, .num03 ,.num04 ,.num05{
    background:
    #fff;
    color:
    #666;
    padding: 40px;
    margin:8px;
  }

  .num01, .num02, .num03{
    width:75%;
  }


  .num04, .num05{
    width:25%;
  }

  .flexbox{
    display:-webkit-box;
    display: -webkit-flex;
    display:-ms-flexbox;
    display: flex;
    -webkit-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
  }

  .num01{
    order:1;

  }
  .num02{
    order:4;

  }
  .num03{
    order:5;
  }

  .num04{
    order:2;
  }
  .num05{
    order:3;

  }
</style>

<div class="container">
  <div class=”flexbox” style="width:75%">
    <div class="num01">A</div>
    <div>
      <div class="num02">B</div>
      <div class="num03">C</div>
    </div>
  </div>

  <div class=”flexbox” style="width:25%;">
    <div class="num04">D</div>
    <div class="num05">E</div>
  </div>
</div>

行動規範の内容に同意します

回答2件

ベストアンサー

Flexboxを使うなら、下記でどうでしょう。

html
1<div class="container">
2  <div class="flexbox">
3    <div class="num01">A</div>
4    <div class="num02">B</div>
5    <div class="num03">C</div>
6    <div class="num04">D</div>
7    <div class="num05">E</div>
8  </div>
9</div>

css
1* {
2  box-sizing: border-box;
3}
4.container{
5  background:red;
6  opacity:.6;
7  display:flex;
8}
9.num01 ,.num02, .num03 ,.num04 ,.num05{
10  background: #fff;
11  color: #666;
12  padding: 40px;
13  margin: 1%;
14}
15.num01, .num02, .num03{
16  width: 73%;
17}
18.num04, .num05{
19  width: 23%;
20}
21.flexbox{
22  display: -webkit-box;
23  display: -webkit-flex;
24  display: -ms-flexbox;
25  display: flex;
26  -webkit-flex-wrap: wrap;
27  -ms-flex-wrap: wrap;
28  flex-wrap: wrap;
29  width: 100%;
30}
31.num01{
32  order:1;
33}
34.num02{
35  order:3;
36}
37.num03{
38  order:5;
39}
40.num04{
41  order:2;
42}
43.num05{
44  order:4;
45}
46
47@media screen and (max-width: 480px) {
48.num01 ,.num02, .num03 ,.num04 ,.num05{
49    Width: 98%;
50  }
51  .num01{
52    order:1;
53  }
54  .num02{
55    order:4;
56  }
57  .num03{
58    order:5;
59  }
60  .num04{
61    order:2;
62  }
63  .num05{
64    order:3;
65  }
66}

Codepenサンプル

CSS Gridを使って、PCサイズはメインとサイドバーの間に疑似要素でギャップを入れてみました。

html
1<div class="container">
2    <div class="num01">A</div>
3    <div class="side">
4      <div class="num04">D</div>
5      <div class="num05">E</div>
6    </div>
7    <div class="num02">B</div>
8    <div class="num03">C</div>
9</div>

css
1.container{
2  background: red;
3  opacity: .6;
4  display: grid;
5  grid-template-columns: 75% 8px 1fr;
6}
7
8.num01, .num02, .num03, .num04, .num05{
9  background: #fff;
10  color: #666;
11  padding: 40px;
12  margin: 8px;
13}
14
15.side {
16  grid-column: 3;
17  grid-row: 1 / 3;
18}
19.num01, .num02, .num03 {
20  grid-column: 1;
21}
22.container::after {
23  content: '';
24  background: #fff;
25  grid-column: 2;
26  grid-row: 1 / 4
27}
28
29@media screen and (max-width: 480px) {
30  .grid {
31    grid-template-columns: 1fr;
32  }
33  .num01, .num02, .num03 {
34    grid-column: 1;
35  }
36  .side {
37    grid-column: 1;
38    grid-row: 2;
39  }
40}