Ako umiestniť Div zvisle nad iným Div, keď sú v kóde Divy v opačnom poradí - css

Pre responzívnu zmenu dizajnu musím umiestniťobrázok zvisle pod textom, nie zvisle nad ním. Poradie kódu HTML však nemôžem zmeniť (všimnite si, že pri spustení nasledujúceho príkladu je obrázok momentálne nad textom:

HTML (Tiež o http://jsfiddle.net/QjV4f/)

<div class="images">
<img src="/images/http://upload.wikimedia.org/wikipedia/commons/thumb/5/54/Metro_wagon_81-720.jpg/200px-Metro_wagon_81-720.jpg">
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et nisl leo. Etiam ipsum libero, hendrerit sit amet mauris ut, condimentum commodo magna. Ut ac orci orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis arcu ante, vestibulum eu tortor non, imperdiet euismod libero.</p>
</div>

Toto by som chcel dosiahnuť (toto je maketa prílohy PNG):

odpovede:

3 pre odpoveď č. 1

Možno budete môcť používať display: table-caption, v závislosti od vašich okolností.

Potrebovali by ste zabaliť .images a .text v akomsi obsahujúcom prvku, ktorý dáme display: table a caption-side: top, Potom pridajte display: table-caption tvojmu .text div a malo by to fungovať ako kúzlo.

To predpokladá, že prvok faux table nemá ďalšie problémy, napríklad to, že sa so svojimi súrodencami nehrá dobre.

HTML vyzerá takto:

<div class="wrap">
<div class="images">
<img src="/images/http://upload.wikimedia.org/wikipedia/commons/thumb/5/54/Metro_wagon_81-720.jpg/200px-Metro_wagon_81-720.jpg"/>
</div>

<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et nisl leo. Etiam ipsum libero, hendrerit sit amet mauris ut, condimentum commodo magna. Ut ac orci orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis arcu ante, vestibulum eu tortor non, imperdiet euismod libero.</p>
</div>

</div><!-- close wrap -->

CSS vyzerá takto:

.wrap {
display: table;
caption-side: top;
}

.text { display: table-caption }

Tu je husle: http://jsfiddle.net/eyesofjeremy/QjV4f/3/

Toto je založené na lesk od Jeremyho Keitha a úspešne som ho použil na zverejnenie stránky. Samozrejme budete musieť CSS priložiť k príslušnému responzívnemu mediálnemu dotazu.

---

1 pre odpoveď č. 2

Existuje jeden spôsob, ako zmeniť poradie prvkov HTML pomocou CSS ktorý funguje v novších prehľadávačoch podporujúcich flexbox, toto zahŕňa prehliadače iOS, Android a Windows Phone (obvyklé ciele pre tento druh responzívneho dizajnu):

body {
display: flex;
flex-flow: column;
}
div.images {
order: 2;
}

Tu je a jsFiddle.

---

0 pre odpoveď č. 3

Skúste vložiť text doľava a nastavenie

width: 100%;
display: block;

a obraz s plavákom: žiadny;

Možno to pomôže.

---

0 pre odpoveď č. 4

a čo toto:

Použite malú Css-WrapperClass a zmeňte jej hodnotu na display: none; alebo „display: block;“, ak je to potrebné.

.someImg
{
background:url("http://upload.wikimedia.org/wikipedia/commons/thumb/5/54/Metro_wagon_81-720.jpg/200px-Metro_wagon_81-720.jpg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);width:200px;height:150px

}

._imageNormal
{
display:block;
}

._imageMobile
{display:none;}


<div class="images top">
<div class="someImg _imageNormal"></div>
</div>
<div class="text center">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et nisl leo. Etiam ipsum libero, hendrerit sit amet mauris ut, condimentum commodo magna. Ut ac orci orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis arcu ante, vestibulum eu tortor non, imperdiet euismod libero.</p>
</div>
<div class="bottom someImg _imageMobile"></div>

Funguje ako prepínač pre triedy _imageNormal a _imageMobile.

EDIT:

http://jsfiddle.net/kHk3B/

---

0 pre odpoveď č. 5

Toto riešenie vás prinúti trochu pracovať: http://jsfiddle.net/QjV4f/2/

Obrázok vznášam (kvôli prerušeniu toku) a umiestnil som ho ručne (v tomto prípade na 5em nahor).

Potom spôsobte prerušenie toku v texte (pomocou position:absolute).

Ako ste si iste všimli, problém je v tom, že ak je váš text dynamický, nie je to užitočné riešenie.

Ale ak má text pevnú dĺžku, môžete začať upravovať niektoré mediálne dotazy a zvyšovať tak okraj v iných rozlíšeniach.

Môžete použiť "float / margin-top„trik rovnako ako“position:absolute / top:x“, obe diela.

Možno je to trochu špinavé riešenie ... ale bez toho, aby som zmenil html alebo použil javascript, si nemôžem myslieť iné.

---

0 pre odpoveď č. 6

Myslím, že to, čo Vivek znamená, je využitie polohyatribút. Je nad prvkami .images a .text nadradený prvok? Nejaký druh kontajnera? Ak je to tak, môžete nastaviť rodiča na pozíciu: relatívna a .obrazy a .text na pozíciu: absolútna a potom ich pomocou css umiestniť. V opačnom prípade môžete nastaviť pozíciu: absolútna na obidve divy a bude absolútna na svoju nadradenú položku alebo na značku tela.

---