HTML/CSS/JS problema

Sveiki,

Turiu tokią mažytę problemytę, kuri, tikiuos, lengvai išsprendžiama.

Sakoma, kad paveiksliukai pasako tūkstantį žodžių, tad tuo ir pradėsiu:

http://i.imgur.com/3Jbn5.png

Tai yra vieno puslapio headeris. Kaip matote, noriu sukeisti elementų tvarką, bet tik mobilijoj versijoj, kitose (tabletų ir PC viskas ok). Žinau, kad tai įmanoma padaryt Javascript/jQuery pagalba, tačiau galvoju gal yra kokių nors gražesnių būdų su CSS?

Dėkui

Sveiki,

 

Turiu tokią mažytę problemytę, kuri, tikiuos, lengvai išsprendžiama.

 

Sakoma, kad paveiksliukai pasako tūkstantį žodžių, tad tuo ir pradėsiu:

http://i.imgur.com/3Jbn5.png

 

Tai yra vieno puslapio headeris. Kaip matote, noriu sukeisti elementų tvarką, bet tik mobilijoj versijoj, kitose (tabletų ir PC viskas ok). Žinau, kad tai įmanoma padaryt Javascript/jQuery pagalba, tačiau galvoju gal yra kokių nors gražesnių būdų su CSS?

 

 

Dėkui

na tai patikrink ar tai PC ar MOB ir pagal tai atvaizduok pacio meniu isdestyma. tarkim:

pc = array('mygtukai', 'tekstas', 'select');

mob = array('mygtukai', 'select', 'tekstas');

nereikes nei js nei css (jei gerai supratau ko tu nori)

Gali pasinaudot JavaScript'u ir redirectint į kitaip formatuotą puslapį

<script type="text/javascript">
<!--
if (screen.width <= 699) {
document.location = "mobile.html";
}
//-->
</script>

Ačiū už greitus atsakymus!

Aš nenoriu redirectinti į kitą puslapį, noriu, kad dydis automatiškai prisitaikytų prie ekrano.

Šiuo metu sprendimas toks:

var title = $('#title').get(0);

$('#title').remove();

$('#right').after(title);

Viskas veikia ok, tačiau galvoju gal yra koks nors būdas automatiškai pritaikyt su CSS3.. Juk iPhone ir Android browseriai visokių gudrybių turi :)

Tikiuosi atsiras koks nors responsive web app ekspertas. Na, o jei ne, teks mokytis iš Lynda mobile web appu video tutorialų..

Jei visi trys blokai dabar turi uždėtą float: left, būtų galima teksto ir selecto blokus įdėti į vieną divą ir jam uždėti float: left, o jo viduje esantiems abiems elementams float: right. Čia paprasčiausias variantas. Dar yra toks dalykas kaip CSS media types. Taip pat galima serverio pusėje patikrinti kas per naršyklė ir tada pridėti atitinkamą CSS klasę.