Bir semantik-u yığınlanabilir ızgarada sütunları yeniden sıralamak

Question

Şu anda Sementic-UI framework yanıtlama yetenekleriyle uğraşıyorum ve istiflenebilir ızgarayı kullanırken bir duvara çarpıyorum. Spesifik olarak, büyük paragrafların ve resimlerin bir üçüncü ve üçte ikisi sütunlarda, soldan ve sağdan dönüşümlü olarak düzenlendiği klasik bir ön sayfa düzenini çoğaltmaya çalışıyordum.

<div class="ui stackable grid"> 
    <div class="sixteen wide column"> 
     <h2>Full width header</h2> 
    </div> 
    <div class="six wide column"> 
     <img alt="Left image" /> 
    </div> 
    <div class="ten wide column"> 
     <p>Right content</p> 
    </div> 
</div> 

<div class="ui stackable grid"> 
    <div class="sixteen wide column"> 
     <h2>Full width header</h2> 
    </div> 
    <div class="ten wide column"> 
     <p>Left content</p> 
    </div> 
    <div class="six wide column"> 
     <img alt="Right image" /> 
    </div> 
</div> 

Bu bölümü tüm bölümler için tekrarlıyorum ve her seferinde iki yan yana sütunu değiştiriyorum. Mesele, ızgara istiflendiğinde, görüntüyü içeriğin üzerinde tutmak isterim. İlk durumda iyi çalışır çünkü sütunlar zaten doğru sıradadır, ancak görüntü sonradan yerleştirildikten sonra ikinci blok için açıkça başarısız olur.

Bunu başarmanın kolay bir yolu olup olmadığını merak ettim ya da sadece javascript kullanarak yapılabilir mi? Izgarayı kullanmaya devam etmeli miyim yoksa başka bir şey mi kullanmalıyım? Javascript kullanmam gerekiyorsa, ızgara düzenini değiştirmenin en iyi yolu ne olurdu?

Bu benim ilk defa yanıt veren tasarım yapmaktan dolayı konuyla ilgili referanslar memnuniyetle karşılanmaktadır.

Answer 1

Bu, grid öğesinin reversed varyasyonunu kullanarak mümkündür. Öneririm ikinci Kılavuz için aşağıdaki:

<div class="ui stackable grid"> 
    <div class="row"> 
     <div class="sixteen wide column"> 
      <h2>Full width header</h2> 
     </div> 
    </div> 
    <div class="computer reversed row"> 
     <div class="six wide column"> 
      <img alt="Right image" /> 
     </div> 
     <div class="ten wide column"> 
      <p>Left content</p> 
     </div> 
    </div> 
</div> 

varsayılan olarak ilk görüntüyü koymak ve sadece bilgisayar ekran boyutlarında ters görüntü yığılmış sütunlu sonunda olabileceğini riskini en aza indirir. Sütunlar yığılmadan önce görüntünün solda göründüğü ekran boyutları olasılığını bırakır, ancak bu daha az ciddi bir sorun olmalıdır.