flexボックスを使用するときに一部のボックスは横並びにさせない

Question

flexボックスでboxを横並びに配置しております。
abc
d
のようにdだけ横並びから除外したいのですがflex-boxを使用してこのような
ことはできますでしょうか？
ご助言のほど、よろしくお願い申し上げます。

<style>
#wrapper{
 display: -webkit-flex;
          display: -moz-flex;
          display: -ms-flex;
          display: -o-flex;
          display: flex;
}
</style>
<div id="wrapper">
 <div id="a"></div>
 <div id="b"></div>
 <div id="c"></div>
 <div id="d"></div>

</div>

Answer 1

ふつうはボックスの外に出したほうがいいかと思いますが、まあ

#wrapper {
  flex-wrap: wrap;
}

#d {
  width: 100%;
}

Comments

[pegy]

コメントありがとうございます。
確かに外だしという単純な事を失念しておりました。
外だしで無事解決することができました。
よろしくお願い申し上げます。

Answer 2

こんな感じでしょうか？

#wrapper{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex; 
  flex-wrap: wrap;
}

div div {
  border: 1px #f00 solid;
  box-sizing: border-box;
  width: 33.3%;
}

div div:nth-child(4) {
  width: 100%;
}

https://jsfiddle.net/takmatz/e1ubgwp1/

Comments

[pegy]

返事が遅くなり誠に申し訳ございません。
無事、アドバイスの方法でも実装できました、wrapプロパティも
学べて良かったです。
よろしくお願い申し上げます。