Merhaba arkadaşlar bir proje geliştiriyorum ve bir yerde takıldım yardımlarınızı bekliyorum..
Problem şöyle :
Öncelikle css olarak bootstrap framework'ü ile çalışıyorum
col-md-8 ve col-md-4 diye 2 divim var diye düşünün .
Benim istediğim mobile geçince bunların yer değiştirmesi yani col-md-4 col-md-8 olarak divlerin yerinin değişmesi
bootstrapda bunun kolay bir metodu vardır diye düşünüyorum ama dökümanlarda bulamadım bilgisi olan varsa yardımcı olabilir mi? 2 divin css ile yerlerini değiştirmek sonraki divi önceki divin önüne koymak gibi bir durum var mı ?
Divlerin yerini değiştirme |
7 Mesajlar | 4.086 Okunma | ||
- Üyelik 30.09.2015
- Yaş/Cinsiyet 28 / E
- Meslek Öğrenci
- Konum Rize
- Ad Soyad A** Y**
- Mesajlar 54
- Beğeniler 29 / 8
- Ticaret 0, (%0)
- Üyelik 23.10.2016
- Yaş/Cinsiyet 27 / E
- Meslek Öğrenci
- Konum Denizli
- Ad Soyad K** C**
- Mesajlar 689
- Beğeniler 0 / 203
- Ticaret 6, (%100)
İlk aklıma gelen çözüm ;
Yukardaki fonksiyonuda aşağıdaki şekilde kullanarak HTML sayfasına bir çıktı gönderebiliriz. Bu çıktı 0 veya 1 olsun. 1 ise mobil , 0 ise normal tarayıcı olsun.
Divlerinin ID'lerini A ve B olarak düşünelim. Normal giriş yapılıyorsa Önce A sonra B gösterilecek.
Ama mobil ise önce B sonra A gösterilecek. O yüzden, #ÖnceGelsin yazan yere mobildeyken önce gösterilmesi gereken div'in id'sini yazıyosun. Örnek (#form1)
Aynı şekilde, mobildeyken sonra gösterilmesi istediğiniz div'in id'sini de #SonraGelsin yazan yazıyla değiştirmeniz kafidir.
function isMobile() {
return preg_match("/(android|avantgo|blackberry|bolt|boost|cricket|docomo|fone|hiptop|mini|mobi|palm|phone|pie|tablet|up\.browser|up\.link|webos|wos)/i", $_SERVER["HTTP_USER_AGENT"]);
}
Yukardaki fonksiyonuda aşağıdaki şekilde kullanarak HTML sayfasına bir çıktı gönderebiliriz. Bu çıktı 0 veya 1 olsun. 1 ise mobil , 0 ise normal tarayıcı olsun.
$Tip = 0;
if(isMobile()) $Tip = 1;
<script>
function Degistir()
{
var Tip = ;
if (Tip == 1)
{
$("#ÖnceGelsin" ).insertBefore( "#SonraGelsin" );
}
}
</script>
Divlerinin ID'lerini A ve B olarak düşünelim. Normal giriş yapılıyorsa Önce A sonra B gösterilecek.
Ama mobil ise önce B sonra A gösterilecek. O yüzden, #ÖnceGelsin yazan yere mobildeyken önce gösterilmesi gereken div'in id'sini yazıyosun. Örnek (#form1)
Aynı şekilde, mobildeyken sonra gösterilmesi istediğiniz div'in id'sini de #SonraGelsin yazan yazıyla değiştirmeniz kafidir.
- Üyelik 15.03.2016
- Yaş/Cinsiyet 27 / E
- Meslek web tasarım
- Konum Nevşehir
- Ad Soyad M** K**
- Mesajlar 215
- Beğeniler 88 / 36
- Ticaret 2, (%100)
burası bence işinize yarar display flex özelliği
- Üyelik 18.11.2011
- Yaş/Cinsiyet 35 / E
- Meslek Web Developer
- Konum İstanbul Avrupa
- Ad Soyad B** Ç**
- Mesajlar 3270
- Beğeniler 1014 / 1983
- Ticaret 53, (%100)
Responsive olarak table group da kullanabilirsiniz.
display: table-header-group;
display: table-footer-group;
Bunları araştırabilirsiniz.
display: table-header-group;
display: table-footer-group;
Bunları araştırabilirsiniz.
- Üyelik 05.10.2016
- Yaş/Cinsiyet 38 / E
- Meslek Yazılım Uzmanı
- Konum İstanbul Avrupa
- Ad Soyad H** B**
- Mesajlar 187
- Beğeniler 8 / 49
- Ticaret 2, (%100)
1.Div
1.Div
- Üyelik 30.09.2015
- Yaş/Cinsiyet 28 / E
- Meslek Öğrenci
- Konum Rize
- Ad Soyad A** Y**
- Mesajlar 54
- Beğeniler 29 / 8
- Ticaret 0, (%0)
Cevaplarınız için teşekkür ederim çözdüm sayılır heralde bootstrap bunun için pull ve push adlı iki özellik elklemiş bu şekilde daha yararlı olcak sanırım js ile yapılması da çok güzel anlatmışsınız teşekkürler..
- Üyelik 17.01.2016
- Yaş/Cinsiyet 38 / E
- Meslek Yazilim
- Konum Antalya
- Ad Soyad M** P**
- Mesajlar 129
- Beğeniler 38 / 45
- Ticaret 4, (%75)
AHAHAHAH :)))))))))) Hocam akşam akşam gülme krizine girdim. Allah'ta sizi güldürsün :)))
Konuyu toplam 1 kişi okuyor. (0 kullanıcı ve 1 misafir)