html - Bootstrap 3: nested columns stacked on desktop, inline on mobile -
i'm trying nest columns in following way:
for desktop view, should see long column 1 on left, long column 2 in middle, , short column 1 on top right short column 2 , short column 3 stacked beneath it.
for tablet view, should see long column 1 @ full width, long column 2 @ full width below that, short column 1, short column 2 & short column 3 stacked next each other below long column 2.
here sketch of how hoping (sorry messy drawing): http://imgur.com/jdi5cex
i've tried code below it's stacking short column 1-3 next each other on both views.
any appreciated!
cheers, charlie
<div class="container"> <div class="row"> <div class="col-md-4"> long column 1 </div> <div class="col-md-4"> long column 2 </div> <div class="col-md-4"> <div class="row"> <div class="col-md-4"> short column 1 </div> <div class="col-md-4"> short column 2 </div> <div class="col-md-4"> short column 3 </div> </div> </div> </div> </div>
you can try give long columns col-sm-12. give other div col-sm-4.
<div class="col-md-4 col-sm-12"></div> <div class="col-md-4 col-sm-12"></div> <div class="col-md-4 col-sm-12"> <div class="col-md-12 col-sm-4"></div> <div class="col-md-12 col-sm-4"></div> <div class="col-md-12 col-sm-4"></div> </div>
you can add xs class more fine tuning too.
Comments
Post a Comment