動的に生成された要素について@media screen and (min-width: XXpx)が効かない

目的：400px以下にwindow幅より大きい場合には@media screen and (min-width: 400px)によりdiv boxを横並びにし、それより小さいwindow幅の場合には、通常通り縦並びにdiv boxを表示させたいと考えております。
これについてjqueryを使用せずに通常のHTMLで生成した要素については
@media screen and (min-width: 400px)が機能し、400pxを境に、横並び及び
縦並びにうまくスイッチされます。

HTML
1<div id="box1" style="width:100px margin-bottom:10px";>A</div>
2<div id="box2" style="width:100px margin-bottom:10px";>B</div>
3<div id="box3" style="width:100px;>C</div>
4
5CSS>
6@media screen and (min-width: 400px) {
7#box1,#box2,#box3{
8display:inline-block;
9}

問題点：実際には#box2及び#box3は#box1または#box2の選択肢により動的に生成される要素になります。この場合操作する前（デフォルトの状態）でwindow幅のサイズが400px以上の状態であれば@media screen and (min-width: 400px)で機能していますが、400px以下の状態で選択をしても縦並びにしかならず、どのようにwindow幅を変えても横並びにはなってくれません。
動的に生成された要素に対しても、@media screen and (min-width: 400px)を機能させるとは可能なのでしょうか？
また、windowサイズで一定の数値を境に縦並び、横並びを変化させたい且つ、動的に要素が生成されるような場合のやり方として、そもそも本件よりも適切な方法があればご助言をいただければ幸いです。

追記:

Javascript
1
2$(function(){
3$('#bo2,#box3').hide();
4$('#box1').on('DOMSubtreeModified propertychange',function(){
5  var first = $('#box1').text();
6  if (first=="XXX") {
7    $('#box2').show();
8})
9$('#box2').on('DOMSubtreeModified propertychange',function(){
10var  second = $('#box2').text();
11if (second=="YYY") {
12  $('#box3').show();
13}
14})
15