回答編集履歴

1

修正

2017/04/24 10:12

投稿

s8_chu
s8_chu

スコア14731

test CHANGED
@@ -54,7 +54,27 @@
54
54
 
55
55
  .container {
56
56
 
57
+ display: flex;
58
+
59
+ flex-direction: column;
60
+
61
+ }
62
+
63
+
64
+
65
+ .header {
66
+
67
+ order: 1;
68
+
69
+ }
70
+
71
+
72
+
73
+ .left, .right {
74
+
57
75
  width: 100%;
76
+
77
+ min-height: 300px;
58
78
 
59
79
  }
60
80
 
@@ -64,12 +84,6 @@
64
84
 
65
85
  background-color: yellow;
66
86
 
67
- min-height: 300px;
68
-
69
- width: 50%;
70
-
71
- float: left;
72
-
73
87
  }
74
88
 
75
89
 
@@ -78,23 +92,7 @@
78
92
 
79
93
  background-color: blue;
80
94
 
81
- min-height: 300px;
82
-
83
- width: 50%;
95
+ order: 2;
84
-
85
- float: right;
86
-
87
- }
88
-
89
-
90
-
91
- .clearfix::after {
92
-
93
- content: " ";
94
-
95
- display: block;
96
-
97
- clear: both;
98
96
 
99
97
  }
100
98
 
@@ -104,27 +102,17 @@
104
102
 
105
103
  .container {
106
104
 
107
- display: flex;
105
+ width: 100%;
108
106
 
109
- flex-direction: column;
107
+ display: inline;
110
108
 
111
109
  }
112
110
 
113
111
 
114
112
 
115
- .header {
113
+ .header, .left, .right {
116
114
 
117
- order: 1;
115
+ order: 0;
118
-
119
- }
120
-
121
-
122
-
123
- .left, .right {
124
-
125
- width: 100%;
126
-
127
- min-height: 300px;
128
116
 
129
117
  }
130
118
 
@@ -134,6 +122,12 @@
134
122
 
135
123
  background-color: yellow;
136
124
 
125
+ min-height: 300px;
126
+
127
+ width: 50%;
128
+
129
+ float: left;
130
+
137
131
  }
138
132
 
139
133
 
@@ -142,9 +136,27 @@
142
136
 
143
137
  background-color: blue;
144
138
 
139
+ min-height: 300px;
140
+
145
- order: 2;
141
+ width: 50%;
142
+
143
+ float: right;
146
144
 
147
145
  }
146
+
147
+
148
+
149
+ .clearfix::after {
150
+
151
+ content: " ";
152
+
153
+ display: block;
154
+
155
+ clear: both;
156
+
157
+ }
158
+
159
+
148
160
 
149
161
  }
150
162