ブートストラップ3のモバイルビューで別のコンテンツをスタックしますか？

Question

私はブートストラップ3を使用しています。画像2のクラス（elseの条件はelseの子コンテンツ）をモバイルビューの "New Image"コンテンツの "box"クラスdivの下にスタックします。今は一番上に積み重ねてあり、それを下に積み重ねるきれいな方法を見つけたいのですが、どうすればそれができますか？

HTML

<div class="col-xs-12 col-sm-5 col-sm-offset-1 col-md-5 col-md-offset-0 left-rail"> 
<div class="tab-content"> 
    <% _.each(profile.suboffices, function(office, key) { %> 
     <div role="tabpanel" class="tab-pane"> 
      <div itemscope class="address"> 
       <div class="col-xs-6 col-sm-6 col-md-6 col-lg-5"> 
        <h3>Location</h3> 
        <p itemprop="streetAddress"> 
         Address 
        </p> 
        <p> 
         Details Here 
        <% if (office.phone) { %> 
         <p itemprop="telephone"> 
          Phone Number 
         </p> 
         <% } %> 
          <a>Contact Agent</a> 
       </div> 
       <div class="col-xs-6 col-sm-6 col-md-6 col-lg-5"> 
        <h3>Hours</h3> 
        <p class="hours"> 
         Content 
        </p> 
       </div> 
      </div> 

      <% if (profile.office_photo) { %> 
       <div class="image"> 
        Show this photo 
       </div> 
       <% } else { %> 
        <div class="image image-two"> 
         Show this other photo 
        </div> 
        <% } %> 
     </div> 
     <% }); %> 
</div> 
</div> 
<div class="col-md-7 col-sm-5 col-xs-12"> 
    <div class="box"> 
     New Image 
    </div> 
</div> 

Answer 1

の代わりに他のあなたが反転した状態で、別のdivを使用して、あなたがそれになりたい場所にそれを置くことができますを使用。だから、image_twoための条件は以下のようになります。

//Below .box 
<% if (!profile.office_photo) { %> 
    //Your markup 
<% } %> 

あなたはプレーンなCSSでこれを実現したい場合は、親のためのdisplay: tableを使用することができます。最初のものはdisplay: table-header-group、最後のものはtable-row-groupとtable-footer-groupです。

私はあなたのための小さな例作ら：

https://jsfiddle.net/morrisjdev/ntkmhsqq/