メディアクエリでflexを解除したい

Question

レスポンシブ対応にHTML.CSSを変更しているのですが、flexで横並びにしている箇所を<div>で塊にしているごとに縦並びにしたいのですが調べてみても明確な回答がなく、ご教授いただければ幸いです。宜しくお願い致します。

<div class="company-wrapper">
<div class="company">
	<a href="#"><img class="mati" src="images/city.jpg" alt="街並"></a><h1 class="topsetumei">********************</h1><h2 class="ryakusyou">(******)</h2><p class="zigyou">
******************</p>
</div>
<div class="company">
<a href="#"><img class="kaisya" src="images/office.jpg" alt="会社"></a><br><h1 class="topsetumei">*********</h1><h2 class="ryakusyou">*******</h2>
<p>**************</p>
</div>
<div class="company">
<a href="#"><img class="keitai" src="images/zyouhou.jpg" alt="情報"></a><br><h1 class="topsetumei">************</h1><h2 class="ryakusyou">**********</h2><p>**************</p>
</div>
</div>

.company-wrapper{
	display: flex;
	margin:0
}
.company{
	margin:0;
	padding: 0;
}
.company a{
	text-decoration: none;
	display: inline-block;
	height: 300px;
	width: auto;
}
.company p{
	margin-top: 10px;
	margin-left: 7px;
	text-align: justify;
	margin-bottom: 50px;
	line-height: 1.5;
}
/* ########### 500px以下 ########### */

@media screen (max-width: 500px){
.company-wapper{
	flex: none;
	margin:0;
	padding: 0;
}
.company{
	flex-direction: column;
	padding-bottom: 5px;
}

.company p{
	margin-top: 15px;
	margin-left: 7px;
	text-align: justify;
	margin-bottom: 5px;
	line-height: 1.5;
}
.company a{
	display: block;
	height: 100px;
	width: auto;
	margin-top: 10px;
	margin-bottom: 20px;
}
.company img{
	width: 100%;
	padding-bottom: 5px;
}

Answer 1

下記の間違いを修正してください。

@media screen and (max-width: 500px){ /* andを追加 */
  .company-wrapper {                  /* .company-wapperから修正 */
    display: block;                   /* 修正 */
    margin:0;
    padding: 0;
  }

/* 略 */

}

Comments

[Yusuke_m25]

これやん

[miyabi_pudding]

あ・・・・。
さすがです。

[hatena19]

wapperはすぐ気づいたけど、and は盲点でした。相当、悩みました。

[let]

皆さんのおかげでcodepenでは思い通りになりましたが、実機で確認するとflexが解除されていません。
どこがおかしいんでしょうか？CSSですかね・・・

[let]

いけました。ありがとうございます。後は微調整でなんとかなりそうです。
勉強になりました。

Answer 2

flexプロパティは、子要素に適用させるものなので、
displayプロパティを変更します。

@media screen (max-width: 500px){
.company-wapper{
  display: block;
  margin:0;
  padding: 0;
}
/* 省略 */
}

Comments

[let]

ご返答ありがとうございます。codepenで動作確認したのですがまだ横並びです。他に何かおかしいのでしょうか？宜しくお願い致します。

[miyabi_pudding]

スクリーンサイズが、横500px以下の状態になっていますか？
また、質問文に記載いただいているCSSはそれで全てでしょうか？

[let]

画面は縮めて見ましたが横並びでした。
CSSは全てではないですが、関係あるものは全て上記コードに貼り付けました。

[Yusuke_m25]

codepenってシェアできないです？

[miyabi_pudding]

もしかしたら、関係ないと思っていた他の部分が関係している可能性もありますので、
HTMLも含めて全て記載してください。
それが難しければ、Yusuke_m25さんのおっしゃる通り、codepenのリンクを貼って下さい。

[Yusuke_m25]

codepenとかだと　もしかしたらiframeの中でwidthをしっかり判定できていない説もあるのかなと思ったので、実際にファイルに書いてみたらうまくいくかもですね。