Dva stĺpce Bootstrap dispozície - html, css, twitter-bootstrap, mriežky

Mám dve skupiny, A & B. V mobilnom zobrazení sa bočný panel umiestni nad obsah A. Podobne aj pre skupinu B. Napriek tomu sa stretávam s dvomi problémami s rozložením Bootstrap v dvoch stĺpcoch.

Číslo č. 1 V zobrazení pre mobilné zariadenia sa obsah A zasekneza bočným panelom B. Pokúsil som sa pridať triedy plavákov a vyčistiť plaváky, z-index, polohovanie atď. a jednoducho som ich nemohol dostať do stohu A, B, A, B = /

Číslo č. 2 ... je to, že chcem, aby maximálna výška bola 100%, ale to, čo dostávam, je 100% výšky iba pre skupinu A. Aké metódy môžem použiť na to, aby obe skupiny A & B boli schopné (spolu) 100 % na stránke?

Môj kód je nasledujúci; Oceňujem všetku pomoc! Vďaka tune.

HTML

<div class="container-fluid">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-4 a">
Sidebar content A
</div>
<div class="col-sm-8">
Body content A
</div>
</div> <!-- end row -->
</div> <!-- end col-sm-12 -->
</div> <!-- end container-fluid -->

<div class="container-fluid">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-4 b">
Sidebar content B
</div>
<div class="col-sm-8">
Body content B
</div>
</div> <!-- end row -->
</div> <!-- end col-sm-12 -->
</div> <!-- end container-fluid -->

CSS

html,body,.col-sm-12,.container-fluid, .row {
height:100%;
}
.row > div {
height:100%;
}
.a, .b {
background-color:#e5e5e5;
}

JSFiddle

Dajte mi vedieť, čo mi chýba.

odpovede:

Môžete len pridať

col-xs-12

na vaše divs zastaviť divný prekrytie, takže váš html by čítal

<div class="col-sm-4 col-xs-12 a">
Sidebar content A
</div>
<div class="col-sm-8 col-xs-12">
Body content A
</div>

Pokiaľ ide o problém s výškou, môžete na svoje riadky použiť novú triedu a aktualizovať css nasledovne:

html,
body {
height: 100%;
}
.container-fluid {
height: 50%;
}
.col-sm-12,
.fullheight {
height: 100%;
}
.a,
.b {
background-color: #e5e5e5;
height: 100%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="col-sm-12">
<div class="row fullheight">
<div class="col-sm-4 col-xs-12 fullheight a">Sidebar content A</div>
<div class="col-sm-8 col-xs-12 fullheight">Body content A</div>
</div>
<!-- end row -->
</div>
<!-- end col-sm-12 -->
</div>
<!-- end container-fluid -->
<div class="container-fluid">
<div class="col-sm-12">
<div class="row fullheight">
<div class="col-sm-4 col-xs-12 fullheight b">Sidebar content B</div>
<div class="col-sm-8 col-xs-12 fullheight">Body content B</div>
</div>
<!-- end row -->
</div>
<!-- end col-sm-12 -->
</div>
<!-- end container-fluid -->