HTMLでレスポンシブなピラミッドを作成したい

いつもお世話になります。

正方形のボックスを積み上げた、ピラミッドを作成しました。
レスポンシブ対応させたいのですが、方法が思いつかず悩んでおります。
（現状、画面幅を狭めると、ピラミッドが崩れる。）

ピラミッドの右側にある「★」ボックスも、
位置を維持したまま、レスポンシブさせたいです。

崩れないようにするには、どのようにすれば良いでしょうか。

また、正方形のサイズを変更すると、
CSSでボックス位置を調整しなければなりません。

もし、位置調整しなくても良い方法があれば、
こちらも併せてご教示頂けますと幸いです。

よろしくお願いいたします。

<div class="bottom_wrap cf">

    <div class="play_block">

        <ul class="stage_5">
            <li><img src="http://placehold.jp/bbbbbb/ffffff/70x70.png?text=15"></li>
        </ul>
        <ul class="stage_4">
            <li><img src="http://placehold.jp/bbbbbb/ffffff/70x70.png?text=13"></li>
            <li><img src="http://placehold.jp/bbbbbb/ffffff/70x70.png?text=14"></li>
        </ul>
        <ul class="stage_3">
            <li><img src="http://placehold.jp/bbbbbb/ffffff/70x70.png?text=10"></li>
            <li><img src="http://placehold.jp/bbbbbb/ffffff/70x70.png?text=11"></li>
            <li><img src="http://placehold.jp/bbbbbb/ffffff/70x70.png?text=12"></li>
        </ul>
        <ul class="stage_2">
            <li><img src="http://placehold.jp/bbbbbb/ffffff/70x70.png?text=6"></li>
            <li><img src="http://placehold.jp/bbbbbb/ffffff/70x70.png?text=7"></li>
            <li><img src="http://placehold.jp/bbbbbb/ffffff/70x70.png?text=8"></li>
            <li><img src="http://placehold.jp/bbbbbb/ffffff/70x70.png?text=9"></li>
        </ul>

        <ul class="stage_1">
            <li><img src="http://placehold.jp/ea7777/ffffff/70x70.png?text=1"></li>
            <li><img src="http://placehold.jp/6fc0d3/ffffff/70x70.png?text=2"></li>
            <li><img src="http://placehold.jp/7dc68f/ffffff/70x70.png?text=3"></li>
            <li><img src="http://placehold.jp/e2bb46/ffffff/70x70.png?text=4"></li>
            <li><img src="http://placehold.jp/b68cce/ffffff/70x70.png?text=5"></li>
        </ul>
    </div>

    <div class="star">
    <img src="http://placehold.jp/666666/ffffff/70x70.png?text=★">
    </div>

</div>

.cf:after { clear: both; content: ''; display: block; }

.bottom_wrap { position:relative; width:100%; max-width:550px; margin:0 auto; }
.bottom_wrap .play_block { float:left; margin:0 50px 0 0; }
.bottom_wrap .play_block ul { font-size:0; }
.bottom_wrap .play_block li { display:inline-block; cursor:pointer; }
.bottom_wrap .play_block .stage_5 { margin:0 0 0 140px; }
.bottom_wrap .play_block .stage_4 { margin:0 0 0 105px; }
.bottom_wrap .play_block .stage_3 { margin:0 0 0 70px; }
.bottom_wrap .play_block .stage_2 { margin:0 0 0 35px; }

.bottom_wrap .star{ float:left; position:absolute; bottom:0; right:0; cursor:pointer; }