html - Bootstrap 3 float layout -
i have problem creating relative simple layout. use bootstrap 3 not must.
so, html:
<div class="container"> <div class="row"> <div class="col-md-4"> <p>a</p> <p>a</p> </div> <div class="col-md-8"> <p>b</p> </div> <div class="col-md-4"> <p>c</p> </div> <div class="col-md-8"> <p>d</p> <p>d</p> <p>d</p> </div> </div> </div>
and visual purpose, css:
div.col-md-4, div.col-md-8 { border: 1px solid red; }
i want on medium screens (md) layout (no matter of height , without white spaces between them):
a b c d
on small screens (sm) kind of layout:
a b c d
jsfiddle link: http://jsfiddle.net/hxz35/2/
thank you!
is looking for?
http://jsfiddle.net/hxz35/5/ <div class="container"> <div class="row"> <div class="col-md-4"> <p>a</p> <p>a</p> </div> <div class="col-md-8"> <p>b</p> </div> <div class="col-md-4 a"> <p>c</p> </div> <div class="col-md-8 d"> <p>d</p> <p>d</p> <p>d</p> </div> </div>
and css
div.col-md-4, div.col-md-8 { border: 1px solid red; } .a {clear: left;} .d{float: initial; overflow:hidden;} @media , (min-width: 992px) { .pull-right-lg { float: right !important; } }
Comments
Post a Comment