Erişilemez HTML içeriğini CSS ile doğru şekilde nasıl geçersiz kılarsınız?

Question

HTML =>Web Page adresine doğrudan erişemediğim bir sayfaya düzenlemeler yapmaya çalışıyorum. Sağ sayfada bu sayfaya baktığınızda "Bağış yap: Bir Takım Bul, Katıl:" Bunları "Katıl: Bir Takım Bul, Bağışla" olarak yeniden sipariş etmek isterim, ancak hangi konteynerin taşınacağını anlayamıyorum. Convio (cms) html'yi geçersiz kılmak için CSS kullanıyorum.

Geçersiz kılma çalışmalarını biliyorum çünkü test sayfamda renk, konumlandırma ve görünürlük gibi bazı şeyleri geçersiz kıldım. Yani sanırım yanlış şeyi hedefliyorum. Hangisi olması gerektiğini anlayamıyorum.

DÜZENLEMEşimdi bazı ilerlemeler FlexBox kullanarak az önce ne göremiyorum ben özlüyorum şey olmalı

/* Relocating the Donate and Participate Buttons */ 

.side-bar { 
    display: flex; 
    flex-direction: column; 
} 

#donate_direct_link_container, 
#donate_link_container, 
#entry_page_reg_team_type_container, 
#frStatus1, 
#frStatus2, 
#frStatus4 { 
    flex: 1; 
    text-align: center; 
    color: white; 

} 


#donate_direct_link_container { 
    flex: 0 0 auto; 
    order: 3; 
} 

#donate_link_container { 
    flex: 0 0 auto; 
    order: 2; 
} 

#entry_page_reg_team_type_container{ 
    flex: 0 0 auto; 
    order: 1; 
} 

#frStatus1 { 
flex: 0 0 auto 
order: 4; 
} 

#frStatus2 { 
    flex: 0 0 auto 
order: 5; 
} 

#frStatus4 { 
    flex: 0 0 auto 
order: 6; 
} 


</style> 

Orada

yapılıyor. Birinin ne olduğunu veya bana doğru yöne yönlendirdiğini umuyoruz.

Answer 1

İçeriğinizi yalnızca CSS kullanarak yeniden sıralamanız gerekirse, en iyi seçeneğiniz flexbox'ın sipariş özelliğini kullanmaktır.

CodePen'de bir demo oluşturdum.

http://codepen.io/BenCodeZen/pen/QNmVLQ

anahtar sarma elemanı bulmak ve buna bir display: flex; stil eklemek ve değiştirmek için gereken, ilgili çocuk elemana order yararlanmaktır.

Herhangi bir sorunuz varsa, lütfen bana bildirmekten çekinmeyin!

Answer 2

Bu mümkün. Flexbox modelini kullanın.

.side-bar { 
    display: flex; 
    flex-direction: column; 
} 

#donate_direct_link_container { 
    flex: 0 0 auto; 
    order: 3; 
} 

#donate_link_container { 
    flex: 0 0 auto; 
    order: 2; 
} 

Tüm kenar çubuğu bloklarını istediğiniz sırayla tanımlayın.